关于javascript:你不知道的-input-之文件选择acceptcapturemultiplewebkitdirectory

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

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

正好整顿一下，先上测试地址：DEMO 地址，目前有这些性能。

1. 动静设置 accept、capture、multiple、webkitdirectory
2. ?accept=.png 的模式疾速还原场景
3. 上传前预览的性能，前端上传前预览文件 image、text、json、video、audio

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. .png
   2. .jpg

反对多种设置的形式 ，如果有多个类型能够 逗号 (,) 分隔，比方 image/png,.jpg

capture – 设置文件起源

次要用于挪动端，文件内容从 相册、前摄像头拍摄、后摄像头拍摄 。
依据 Android 组的共事说，他们收到是 Boolean 类型的，所以必定是不反对这么多功能。

capture – 设置计划

1. user 前置
2. environment 后置
3. camera 相机
4. camcorder 摄像机
5. microphone 录音
6. filesystem

multiple – 是否反对多选

设置上即为反对多选，然而 在微信中反对有问题

webkitdirectory

抉择目录上传，并不是一个规范的属性，chrome 还是能够体验一下的。

抉择文件的事件及应用

onchange 事件监听

onchange 事件中能够获取到抉择动作，抉择的文件在 files 中保留。
操作实现之后要记得清空，否则再次抉择雷同的文件不会触发 change 事件。

input.onchange = function(event){
    event.target.files
    // ...
    this.value = ''
}

File 文件上能获取到的内容

1. 文件名
2. 文件大小
3. 文件类型
4. 门路（假门路，有的返回的是空的）

File 文件获取内容 & 其余信息

比如说 图片宽高、视频宽高、音频时长、exif 之类的信息是不会返回的。

这里咱们须要二次操作

1. 比如说 URL.createObjectURL() 加载一下，而后加载，而后获取信息。
2. 还能够 FileReader 读取成 arrayBuffer，而后剖析字节，获取 exif 信息。

属性测试后果

因为有时效性，所以我做一下零碎和工夫的记录

测试工夫：2020 年 8 月 1 日 16:02:17
iOS：iPhone (6)，12.4.5
Android：Honor 9i，LLD-AL20，9.1.0.146

微信公众号：前端 linong

欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。