兼容input 文件选择_你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）...

前段时间写了一个上传文件前预览的功能，用于 pc 端。

这次又要测试一下移动端的兼容性，在客户端内使用。

正好整理一下，先上测试地址：DEMO 地址 https://www.lilnong.top/static/html/sf-a-1190000022597533-file-preview-accept-capture-multiple.html?accept=false&capture=true，目前有这些功能。

1. 动态设置 accept、capture、multiple、webkitdirectory

2. ?accept=.png 的形式快速还原场景

3. 上传前预览的功能，前端上传前预览文件 image、text、json、video、audio : https://segmentfault.com/a/1190000022597533

input type="file" 的属性

accept 设置上传的文件类型

属性其实是表明服务器端可接受的文件类型，但是在前端这边表现就是会过滤文件类型

accept 设置方式

1. 通配符。chrome 有个版本使用通配符会造成卡顿(最新版本已修复)

   1. audio/*(所有音频文件)

   2. video/*(所有视频文件)

   3. image/*(所有图片文件)

2. 有效的 MIME 类型

   1. image/png

   2. image/jpeg 。image/jpg 是不会识别的

3. 文件扩展名

   1. .pn