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"/>

• 1

选择图片文件

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

• 1

    这段代码在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">

• 1

选择视频文件

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

• 1
• 2

    accept=”audio/*”和 accept=”video/*”属性 在 Webkit浏览器下也会有同样的响应延迟的问题。同理，通过将 * 通配符 修改成指定的MIME类型就可解决。

选择常用的文档文件。

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

• 1

获取上传的对象

    原生：

onchange="changeMethods"
@change="changeMethods"

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