2011-09-29 34 views
0

Internet Explorer是我的开发生活的祸根,拒绝再次做其他浏览器似乎毫不费力地做的事情。我试图清除浏览代码/值,如果用户选择一个不允许的文件类型。适用于FF但不适用IE 9.谢谢IE中没有清除框的问题

<script type="text/javascript"> 
<!-- 
    extArray = new Array(".jpg", ".png"); 
    function LimitAttach(form, file) { 
     allowSubmit = false; 
     if (!file) return; 
     while (file.indexOf("\\") != -1) 
      file = file.slice(file.indexOf("\\") + 1); 
      ext = file.slice(file.indexOf(".")).toLowerCase(); 
     for (var i = 0; i < extArray.length; i++) { 
      if (extArray[i] == ext) { 
       allowSubmit = true; 
       break; 
      } 
     } 
     if (allowSubmit) { 
      return true; 
     } else { 
      alert("Please only upload files that end in types: " 
      + (extArray.join(" ")) + "\nPlease select a new " 
      + "file to upload and submit again."); 
      document.getElementById('photobrowser').value = ""; 
      return false; 
     } 
    } 
--> 
</script> 


    <form action="process.php" method="POST" enctype="multipart/form-data" name="formUpload"> 
     <label>Picture:</label> 
     <input type="file" name="photo" id="photobrowser" onchange="return LimitAttach(formUpload, formUpload.photo.value)" tabindex="4"> 
     <input type="hidden" name="subphoto" value="<?php echo $newCount ?>" /> 
     <input type="image" src="styling/images/button-add-photo.png" id="subBtn" tabindex="6" /> 
    </form 

回答

1

浏览器在文件输入方面的限制差别很大。文件输入允许用户与他们的文件系统中的文件进行交互和选择。所以所有浏览器都会限制JS自动选择文件。 IE进一步禁止改变输入选择,甚至是空白字符串。这实际上是有道理的,因为如果你不允许选择给定的文件,为什么你应该被允许改变它呢?

而不是在JS中验证它,你应该验证后端的文件。前端验证对于易用性来说是可以的,但即使它已经到位,也应该始终进行后端验证。用户可以简单地关闭JS,使用类似萤火虫的东西来改变它,甚至(有时)将文件下载到本地机器,改变它,然后用它来提交到你的网站。

+0

我有进一步的验证,这只是为了加快文件选择,但谢谢你的抬头。 – user29660

0

您是否尝试过通过this在JS方法,而不是由ID?:

onchange="return LimitAttach(this, this.value);" 

的JavaScript找到它:

function LimitAttach(input, file) { 
    allowSubmit = false; 
    if (!file) return; 
    while (file.indexOf("\\") != -1) 
     file = file.slice(file.indexOf("\\") + 1); 
     ext = file.slice(file.indexOf(".")).toLowerCase(); 
    for (var i = 0; i < extArray.length; i++) { 
     if (extArray[i] == ext) { 
      allowSubmit = true; 
      break; 
     } 
    } 
    if (allowSubmit) { 
     return true; 
    } else { 
     alert("Please only upload files that end in types: " 
     + (extArray.join(" ")) + "\nPlease select a new " 
     + "file to upload and submit again."); 
     input.value = ""; 
     return false; 
    } 
} 

编辑

这是怎么样的一个黑客,但你可能想给它一个镜头:

function checkImg(val){ 
    var dgr = val.value; 
    dgr = dgr.substr(dgr.length-4, dgr.length) 
    dgr = dgr.toLowerCase(); 
    if (dgr =='.jpg' || dgr == 'jpeg' || dgr== '.gif'){ 
    alert('image'); 
    }else{ 
    alert('not image'); 
    var objD = document.forms['form1'].divR; 
    objD.innerHTML = ''; 
    objD.innerHTML = '<input id="uImg" name="uImg" type="file" class="defText" style="font-size: 10pt" onchange="javascript: checkImg(this);" size="30">'; 
    } 
} 

<form name="form1" id="form1" method="post"> 
    <div id="divR" name="divR"> 
    <input id="uImg" name="uImg" type="file" class="defText" style="font-size: 10pt" onchange="javascript: checkImg(this);" size="30"> 
    </div> 
</form> 
+0

这适用于FF,但不适用于IE。它识别错误的文件类型,并显示错误框,但它不清除文本框中的值... – user29660

+0

添加了另一种解决方案,我的答案。不是最优雅的解决方案,但我认为它将适用于所有浏览器。 –