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

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

accept	capture	multiple	webkitdirectory	iOS-vvMusic	Android-vvMusic	iOS-WeChat	Android-WeChat
×	×	×	×	拍照或录像、照片图库、浏览	图库、联系人、音乐
.jpg,.png	×	×	×	拍照或录像、照片图库、浏览	图库、联系人、音乐
×	true	×	×	后置	图库、联系人、音乐
×	空	×	×	后置	图库、联系人、音乐
×	user	×	×	前置	图库、联系人、音乐
×	environment	×	×	后置	图库、联系人、音乐
×	camera	×	×	后置	图库、联系人、音乐
×	camcorder	×	×	后置	图库、联系人、音乐
×	microphone	×	×	后置	图库、联系人、音乐
×	filesystem	×	×	后置	图库、联系人、音乐
image/*	×	×	×	拍照、照片图库、浏览	相册选择照片
image/*	true	×	×	后置拍照	后置拍照
image/*	空	×	×	后置拍照	后置拍照
image/*	user	×	×	后置拍照	前置拍照
image/*	environment	×	×	后置拍照	后置拍照
image/*	camera	×	×	后置拍照	后置拍照
image/*	camcorder	×	×	后置拍照	后置拍照
image/*	microphone	×	×	后置拍照	后置拍照
image/*	filesystem	×	×	后置拍照	后置拍照
video/*	×	×	×	录像、照片图库、浏览	相册选择视频
video/*	true	×	×	后置录像	后置录像
video/*	空	×	×	后置录像	后置录像
video/*	user	×	×	前置录像	后置录像
video/*	environment	×	×	后置录像	后置录像
video/*	camera	×	×	后置录像	后置录像
video/*	camcorder	×	×	后置录像	后置录像
video/*	microphone	×	×	后置录像	后置录像
video/*	filesystem	×	×	后置录像	后置录像
audio/*	×	×	×	拍照或录像、照片图库、浏览	不支持
audio/*	true	×	×	录音机	后置照片
audio/*	空	×	×	录音机	后置照片
audio/*	user	×	×	录音机	前置照片
audio/*	environment	×	×	录音机	后置照片
audio/*	camera	×	×	录音机	后置照片
audio/*	camcorder	×	×	录音机	后置照片
audio/*	microphone	×	×	录音机	后置照片
audio/*	filesystem	×	×	录音机	后置照片
video/,audio/	×	√	×	拍照或录像、照片图库、浏览(多选)	图库、联系人、音乐(单选)
×	×	×	×

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。