HTML5 - 限制input file 可选择的文件类型

比眉伴天荒 2021-09-18 13:56 576阅读 0赞

### 前言 ###

实现选择文件并上传的功能时，都会用到 input file 控件。  
    `<input id="inputFile" type="file" />`  
    `input[file]`标签的`accept属性`可用于指定上传文件的 [`MIME类型`][MIME] 。

`input file`类型有一个属性，名为 `accept`。它可以用来指定浏览器接受的文件类型，也就当我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。通过使用 accept 属性限制文件类型,如果想支持多种类型的话，只要在 accept 里面放置多个属性就可以了（逗号隔开）。

#### 选择JSON文件 ####

#### 选择图片文件 ####

这段代码在`Chrome`和`Safari`等Webkit浏览器下却出现了`响应滞慢`的问题，可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。  
    在IE和Firefox中使用 `accept=”image/*”`属性则没有发现响应延迟的问题。

于是几经尝试后，发现是 `accept=”image/*”`属性的问题，删掉它或者将 `*`通配符修改为指定的`MIME类型`，就可以解决Webkit浏览器下的对话框显示滞慢的问题。  
    原因：`accept=”image/*”`属性会对每一个文件都遍历一次所有的`”image/*”`文件类型，当文件较多时，文件的检验时间较长，这可能是Webkit的底层实现的bug。  
    解决办法如下：指定要加载的图片类型

#### 选择视频文件 ####

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

#### 选择常用的文档文件。 ####

#### 获取上传的对象 ####

原生：

onchange="changeMethods"
    @change="changeMethods"
    
    changeMethod(e){
      let file = e.target.files[0]
    }

[MIME]: http://www.iana.org/assignments/media-types/media-types.xhtml#image