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

转载自 SegmentFault

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

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

原文：SegmentFault