2011-09-29 38 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

添加了另一種解決方案,我的答案。不是最優雅的解決方案,但我認爲它將適用於所有瀏覽器。 –