如何限制HTML上傳框中的文件類型？

Question

我環視網絡，但找不到解決方案。 但我剛剛發現，當我們上傳文件到Flickr， 文件對話框自動過濾文件類型，如何使它？

Answer 1

你可以解析這個輸入的.value性能和使用方法substr()檢查文件的擴展名（例如，如果最後3個字母==「巴」等）

執行更復雜的檢查，你不得不做服務器端。

編輯： 這是一個jQuery代碼，會爲你做的工作：

<script type="text/javascript"> 
    var Checker = { 
     Extensions: ["jpg", "png", "gif", "bmp"], 

     Validate: function(objid) 
     { 
      return jQuery.inArray(objid.value.substr(objid.value.length - 3, 3), Checker.Extensions) > -1; 
     } 
    }; 

    $(document).ready(function(){ 
     $('#submitButton').click(function(){ 
      if (Checker.Validate($('#selectFile')[0])) 
      { 
       alert("OK, we can submit!"); 
      } else { 
       alert("This file type is not supported. \n Supported file types are: " 
       + Checker.Extensions.join(", ")); 
      } 
     }); 
    }); 
</script> 
<input type="file" id="selectFile" /> 
<input type="button" id="submitButton" value="Submit" /> 

注：accept屬性不上的主流瀏覽器正常工作，所以JavaScript的解決方案是最好的位置，但是請記住再次檢查服務器端的文件。

Answer 2

您無法獲得另一個答案中提到的.value屬性。由於安全原因，它受到限制。

也有一個「接受」屬性，這可能是很方便，如：

<input type="file" name="picture" accept="image/gif, image/jpeg, image/jpg" /> 

我不知道它是各種瀏覽器中雖然如何很好的支持。

但是，您可以使用其他技術（如Java或Flash）創建自己的上傳組件。