你不知道的input之文件选择( accept、capture、multiple、webkitdirectory）

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