你不知道的 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

capture - 设置文件来源

主要用于移动端，文件内容从 相册、前摄像头拍摄、后摄像头拍摄。
根据 Android 组的同事说，他们收到是 Boolean 类型的，所以肯定是不支持这么多功能。

capture - 设置方案

user 前置 environment 后置 camera 相机 camcorder 摄像机 microphone 录音 filesystem

multiple - 是否支持多选

设置上即为支持多选，但是在微信中支持有问题

webkitdirectory

选择目录上传，并不是一个标准的属性，chrome 还是可以体验一下的。

选择文件的事件及使用

onchange 事件监听

onchange 事件中可以获取到选择动作，选择的文件在 files 中保存。
操作完成之后要记得清空，否则再次选择相同的文件不会触发change事件。

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

File 文件上能获取到的内容

文件名文件大小文件类型路径（假路径，有的返回的是空的）

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

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

这里我们需要二次操作

比如说 URL.createObjectURL() 加载一下，然后加载，然后获取信息。还可以 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/ × √ × 拍照或录像、照片图库、浏览(多选) 图库、联系人、音乐(单选) × × × ×