html input批量选择文件路径,你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）...

待我称王封你为后i 2022-10-06 04:59 548阅读 0赞

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

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

正好整理一下，先上测试地址：DEMO 地址，目前有这些功能。动态设置 accept、capture、multiple、webkitdirectory

?accept=.png 的形式快速还原场景

上传前预览的功能，前端上传前预览文件 image、text、json、video、audio

input type="file" 的属性

accept 设置上传的文件类型

属性其实是表明服务器端可接受的文件类型，但是在前端这边表现就是会过滤文件类型

![bda38344ee592067d7817e547ad4340a.png][]

accept - 设置方式通配符。chrome 有个版本使用通配符会造成卡顿(最新版本已修复)audio/\*(所有音频文件)

video/\*(所有视频文件)

image/\*(所有图片文件)

有效的 MIME 类型image/png

image/jpeg 。image/jpg 是不会识别的

文件扩展名.png

.jpg

支持多种设置的方式，如果有多个类型可以逗号(,)分隔，比如 image/png,.jpg

![6e5e402699206758eac1de1803115cca.png][]

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.146acceptcapturemultiplewebkitdirectoryiOS-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

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

![b739ec46bb5c46d9c0aa4ce35ba1ea56.png][]

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

\[你不知道的 input 之文件选择(accept、capture、multiple、webkitdirectory)\]http://www.zyiz.net/tech/detail-147916.html

[bda38344ee592067d7817e547ad4340a.png]: /images/20221005/69fb76fdffbd414d862743408e97cdf9.png
[6e5e402699206758eac1de1803115cca.png]: /images/20221005/abd2ca4b334946bf85a8899e7c091b4a.png
[b739ec46bb5c46d9c0aa4ce35ba1ea56.png]: /images/20221005/ddeef6c291d348c6ad63a0699f8b5dc0.png