html input批量选择文件路径,你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）...

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

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

正好整理一下，先上测试地址：DEMO 地址，目前有这些功能。动态设置 accept、capture、multiple、webkitdirectory

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

上传前预览的功能，前端上传前预览文件 image、text、json、video、audio

input type="file" 的属性

accept 设置上传的文件类型

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

accept - 设置方式通配符。chrome 有个版本使用通配符会造成卡顿(最新版本已修复)audio/*(所有音频文件)

video/*(所有视频文件)

image/*(所有图片文件)

有效的 MIME 类型image/png

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

文件扩展名.png

.jpg

支持多种设置的方式，如果有多个类型可以逗号(,)分隔，比如 image/png,.jpg