[HTML5] INPUT FILE 限制 MIMEtype 的選擇

文章出處 http://shinychang.net/article/53ff169465dd204503e125ad

<input type='file'>使用accept屬性，在W3C的規格只允許Image/*、Video/*、Audio/*三種MIMEtype是允許的
也就是說上述三種以外的選擇，就只能選擇所有檔案*.*

接下來直接看範例

<div>All Files <input type='file'></div>
<div>Images <input type='file' accept='image/*'></div>
<div>Videos <input type='file' accept='video/*'></div>
<div>Audios <input type='file' accept='audio/*'></div>
<div>Zip Files <input type='file' accept='.zip'></div>
<div>Custom <input type='file' accept='.zip,.rar,.7z'></div>

第一個是使用了最基本的，也就是沒有任何的限制
第二到第四個則是使用HTML5的規範內的MIMEtype
第五個則是限制只能上傳.zip結尾的ZIP檔
最後一個，則是同時允許.zip, .rar和.7z三種格式
透過這樣的範例，就知道怎麼去限制不同類型的檔案

不過這邊要特別注意一點，即便前端已經限制住了，後端也一定要檢查
使用者傳來的資料永遠都是不可信的！

至於瀏覽器相容性的部分，IE10+
第五和第六種都是非W3C規範內的所以FireFox不支援