在文件上傳控件（input type='file'）中，可以通過accept屬性實現對文件類型的過濾。
一、相關代碼：
下面給出對應的文件上傳控件代碼：
<input type="file" id="myFile" accept="image/jpeg,image/gif,application/msword"/><br/>
上面的代碼表示限制文件上傳類型為.jpg/.gif/.doc。
二、限制規則：
在文件上傳控件的accept屬性中，接受以下兩種格式的限制符：
- 文件類型，但不限制具體擴展名，如：image/*，就只要是圖片就行。
- 文件類型+具體的文件擴展類型，如：image/jpeg，使用的是MIME_TYPE類型
- 多個MIME_TYPE類型之間用逗號分隔。
三、accept屬性具體接受的類型：
accept這個屬性，只在FF，ie10和chrome中有效。
以下是常用的類型：
四、兼容性問題：
我們在代碼中使用了HTML5的input[file]標簽去上傳圖片
<input type="file" name="file" class="element" accept="image/*">
同時，在上面代碼中，使用了 accept=”image/*” 去過濾所有非圖片的文件。但是，這段代碼在Chrome和Safari等Webkit瀏覽器下卻出現了響應滯慢的問題，可能要等 6~10s 才能彈出文件選擇對話框。簡直不能忍呀。在IE和Firefox中使用accept="image/*"屬性則沒有發現響應延遲的問題。
對屬性進行逐一排查后，發現是accept=”image/*”的問題。將accept=”image/*”改為指定的圖片格式就不會出現上述的概率性問題，所以我將上傳圖片的過濾格式指定為了常用的幾種格式
<input type="file" name="file" class="element" accept="image/jpg,image/jpeg,image/png">
當然，如果希望過濾所有的非圖片格式，那么這個問題還是會存在。原因初步猜想是當設置accept=”image/*”時，瀏覽器會在彈出框中處理所有的非圖片元素，包含所有的圖片格式，如果文件較多會增加處理時間，而這個時候可能在這個版本的chrome中有bug（也許是底層沒實現好），導致概率性時間增長。