前段时间写了一个上传文件前预览的功能,用于 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