linong
  • 16.5k

你不知道的 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 设置上传的文件类型

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

image.png

accept - 设置方式

  1. 通配符。chrome 有个版本使用通配符会造成卡顿(最新版本已修复)

    1. audio/*(所有音频文件)
    2. video/*(所有视频文件)
    3. image/*(所有图片文件)
  2. 有效的 MIME 类型

    1. image/png
    2. image/jpegimage/jpg 是不会识别的
  3. 文件扩展名

    1. .png
    2. .jpg

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

image.png

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

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

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

clipboard.png

阅读 762

推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

995 人关注
122 篇文章
专栏主页