前段时间写了一个上传文件前的预览功能，PC端用的。本次我们将测试移动端的兼容性，在客户端使用。顺便梳理一下，先去测试地址：DEMO地址，目前有这几个功能。动态设置accept,capture,multiple,webkitdirectory?accept=.png形式快速恢复上传前场景预览功能，上传前预览文件image,text,json,video,audioinputtype="file"-end属性acceptsettinguploadedfiletype属性在server端其实是表示可接受的文件类型，但是在前端会过滤文件类型accept-setting方法通配符。chrome有一个版本使用通配符导致卡顿（最新版已修复）audio/*(所有音频文件)video/*(所有视频文件)image/*(所有图片文件)validMIMEtypeimage/pngimage/jpeg。image/jpg是无法识别的文件扩展名.png.jpg支持多种设置。如果有多种，可以用逗号（,）隔开，比如image/png,.jpgcapture-设置文件源主要用于移动端，文件内容取自相册，前置摄像头和后置摄像头。据Android组的同事说，他们收到的是Boolean类型，肯定支持不了那么多功能。capture-settingschemeuserfrontenvironmentrearcameracameracameracameramicrophonerecordingfilesystemmultiple-是否支持多选设置的意思是支持多选，但是webkitdirectoryselectiondirectoryuploadinWeChat有问题，不是标准的property,chrome还是可以体验的。选择文件的事件，使用onchange事件监听onchange事件得到选择动作，选择的文件保存在files中。操作完成后记得清除，否则再次选择同一个文件不会触发change事件。input.onchange=function(event){event.target.files//...this.value=''}FileFile文件上可获取的内容文件名文件大小文件类型路径（假路径，有的返回Empty)File文件获取内容&其他信息如图片宽高、视频宽高、音频时长、exif等信息将不会返回。这里我们需要通过URL.createObjectURL()等二次操作来加载，再加载，再获取信息。也可以使用FileReader读取arrayBuffer，然后分析字节获取exif信息。属性测试结果具有时效性，所以记录一下系统的测试时间和时间：2020年8月1日16:02:17iOS：iPhone(6)、12.4.5Android：荣耀9i、LLD-AL20、9.1。0.146acceptcapturemultiplewebkit目录iOS-vvMusicAndroid-vvMusiciOS-WeChatAndroid-WeChat××××照片或视频，相册，浏览相册，联系人，music.jpg,.png×××相片或视频，相册，浏览相册，通讯录，音乐×true××后图库，联系人，音乐×空××后图库，联系人，音乐×用户××前图库，联系人，音乐×环境××后图库，联系人，音乐×相机××后图库，联系人，音乐×摄像机××返回图库，通讯录，音乐×麦克风××返回图库，通讯录，音乐×文件系统××返回图库，通讯录，音乐图片/*×××照片，相册，浏览相册，选择照片图片/*true××后置摄像头，后置摄像头图像/*空××后置摄像头，后置摄像头图像/*用户××后置摄像头，前置摄像头图像/*环境××后置摄像头图像/*摄像机××后置摄像头图像/*摄像机××后方cameraimage/*microphone××rearcameraimage/*filesystem××RearCameraRearCameraVideo/*×××Video,PhotoGallery,BrowseAlbum选择视频Video/*true××RearVideoRearVideo/*Empty××RearVideoRearVideo/*用户××预录视频/*环境××后录视频/*摄像机××后录视频/*摄像机××后录视频/*摄像机××后录视频/*麦克风××后录视频/*文件系统××录音-录音-录音-录音/*×××拍照或录音，图库，浏览不支持录音/*真××后录相片音频/*空××录音机照片音频/*用户××录音机照片音频/*环??境××录音机照片音频/*摄像机××录音机照片音频/*摄像机××录音机照片音频/*麦克风××录音机照片音频/*filesystem××recorderphotovideo/,audio/×√×photoorvideo,photogallery,browse(multiplechoice)gallery,contacts,music(单选)××××WeChat公众号:前端立农欢迎大家关注我的公众号，有问题也可以加我的微信前端交流群。
