HTML5 - 限制input file 可選擇的檔案類型

前言

    實作選擇檔案并上傳的功能時，都會用到 input file 控件。

<input id="inputFile" type="file" />

input[file]

标簽的

accept屬性

可用于指定上傳檔案的

MIME類型

。

input file

類型有一個屬性，名為

accept

。它可以用來指定浏覽器接受的檔案類型，也就當我們打開系統的選擇檔案彈框的時候，預設界面中呈現的檔案類型。通過使用 accept 屬性限制檔案類型,如果想支援多種類型的話，隻要在 accept 裡面放置多個屬性就可以了（逗号隔開）。

選擇JSON檔案

<input id="file1" type="file" accept=".json"/>
           

選擇圖檔檔案

<input id="file1" type="file" accept="image/*"/>
           

    這段代碼在

Chrome

和

Safari

等Webkit浏覽器下卻出現了

響應滞慢

的問題，可能要等 6~10s 才能彈出檔案選擇對話框。簡直不能忍呀。

    在IE和Firefox中使用

accept=”image/*”

屬性則沒有發現響應延遲的問題。

    于是幾經嘗試後，發現是

accept=”image/*”

屬性的問題，删掉它或者将

*

通配符修改為指定的

MIME類型

，就可以解決Webkit浏覽器下的對話框顯示滞慢的問題。

    原因：

accept=”image/*”

屬性會對每一個檔案都周遊一次所有的

”image/*”

檔案類型，當檔案較多時，檔案的檢驗時間較長，這可能是Webkit的底層實作的bug。

    解決辦法如下：指定要加載的圖檔類型

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

選擇視訊檔案

<input id="file1" type="file" accept="audio/*"/>
<input id="file1" type="file" accept="video/*"/>
           

accept=”audio/*”

和

accept=”video/*”

屬性 在 Webkit浏覽器下也會有同樣的響應延遲的問題。同理，通過将 * 通配符 修改成指定的MIME類型就可解決。

選擇常用的文檔檔案。

<input id="file1" type="file" accept=".xls,.doc,.txt,.pdf"/>
           

擷取上傳的對象

    原生：

onchange="changeMethods"
@change="changeMethods"

changeMethod(e){
  let file = e.target.files[0]
}