Input元素的file屬性之accept在各瀏覽器的表現結果

前言:

---

先來談談Input的file屬性，通常我們所知的file欄位的html語法是這樣:

<input type="file" name="myfile" id="myfile" />

但，還有一個不錯的功能，那就是能指定這個file欄位可接受的附檔名，這個功能就是accept。accept屬性可接受指定的文件類型，內容可以填入檔案類型，如 : image/*等同於選取所有圖片類型;text/*等於所有文字檔格式，若要指定單一檔案格式，必須參考MIME Type。

用法如:

<input type="file" name="myfile" id="myfile" accept="image/*"/><!--只接受影像檔-->

<input type="file" name="myfile" id="myfile" accept="audio/*,video/*,image/*"/>
<!--只接受影像檔，影音檔-->

這樣看起來好像很方便，沒錯，對於嚴謹的網站來說，這真的很方便，尤其限制只能使用圖片檔，可以大大減少使用者傳錯不屬於圖片檔的附檔名。
但也有另一個缺點是，並不是所有的瀏覽器都能支援。


瀏覽器的支援程度:

---

IE和Safari瀏覽器不支持Accept屬性(目前來講是這樣)，但其他瀏覽器雖然有支援，仍有弱點。



瀏覽器測試報告:

---

由於IE和Safari瀏覽器不支持Accept屬性，目前不做這兩種瀏覽器的測試，因為我做過測試了，好像真的not work。

accept內容	FireFox	chrome	opera
accept="audio/*,video/*,image/*"	無作用	無作用	成功只選取audio/video/image類型
accept="image/*"	成功只選取image類型	成功只選取image類型	成功只選取image類型
accept="video/*"	成功只選取video類型	成功只選取所有video類型	成功只選取video類型
accept="text/*"	無作用	無作用	成功只選取text類型
accept="application/*"	無作用	無作用	成功只選取application類型
accept="image/gif,image/png 針對MIME_type選取檔案格式	無作用	只要大於一種，只會顯示"自訂檔"	成功只選取gif與png類型
accept="image/gif" 針對MIME_type選取只選取gif檔案格式	無作用	成功只出現gif檔案格式	成功只選取gif類型
accept="application/pdf" 針對MIME_type選取只選取pdf檔案格式	無作用	成功只出現pdf檔案格式	成功只選取pdf類型
accept="application/pdf,image/gif" 針對MIME_type選取只選取pdf與gif檔案格式	無作用	無作用	成功只選取pdf與gif類型

用你現在的瀏覽器，可測試	accept內容
	accept="audio/*,video/*,image/*"
	accept="image/*"
	accept="video/*"
	accept="text/*"
	accept="application/*"
	accept="image/gif,image/png 針對MIME_type選取檔案格式
	accept="image/gif" 針對MIME_type選取只選取gif檔案格式
	accept="application/pdf" 針對MIME_type選取只選取pdf檔案格式
	accept="application/pdf,image/gif" 針對MIME_type選取只選取pdf與gif檔案格式

瀏覽器測試結論:

---

• accept屬性的表現結果在opera完全作用
• 同時設定只接受image/*(所有圖片格式)跟application/(所有文件格式)*=>瀏覽器只讀取image/*(只select圖片類型，忽略application)
• 只設定application/* =>除了opera有特地列出所有的application之外，在其他瀏覽器等同於所有檔案類型
• 針對MIME_type的選取方式，大於一種就只會出現自訂檔
• 限制檔案格式只有以下瀏覽器支援( supported by Opera 11+, Chrome 16+ and Firefox 9+ only.)

建議:

---

• 即使可以使用accpet屬性來限制上傳檔的檔案類型，但請勿使用這個方法來做為檔案的驗證，若要做驗證還是在server做比較好。
• 可使用javascript來檔副檔名，但若使用者關掉瀏覽器的javascript等同於無作用。