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]
}