选择所有图片文件

<input type="file" accept="image/*" /> //accept限制选择文件类型

选择相机

<input type="file" accept="image/*" capture="camera">

选择多个文件

<input type="file" multiple/>

获取上传文件的信息

<input type="file" id="pic" accept="image/*" multiple/> document.getElementById(‘pic‘).files

打印的是上传文件的数组 FileList

FileList {0: File(62086), 1: File(57494), 2: File(113658), length: 3} 0: File(62086) {name: "zhengchunling.jpg", lastModified: 1540903556855, lastModifiedDate: Tue Oct 30 2018 20:45:56 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 62086,type: "image/jpeg",webkitRelativePath: ""…} 1: File(57494) {name: "zhonghongwei.jpg", lastModified: 1540889348269, lastModifiedDate: Tue Oct 30 2018 16:49:08 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 57494, …} 2: File(113658) {name: "zhouxin.jpg", lastModified: 1540889348226, lastModifiedDate: Tue Oct 30 2018 16:49:08 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 113658, …} length: 3 __proto__: FileList

FileReader的使用

//FileReader接口供给了读取文件的要领和包罗读取功效的事件模型。 //创建FileReader实例 var fr=new FileReader() //挪用readAsDataURL要领 将文件读取为 DataURL //还有挪用readAsBinaryString将文件转为二进制码 //readAsText将文件读取为文本 fr.readAsDataURL(file[0]) //onload 文件读取告成完成时触发 fr.onload=function(e){ console.log(e) //东西 //得到base64格局的图片 var imgbase64=e.target.result console.log(typeof(e.target.result)) //类型为string }

input上传文件、挪用相机和FileReader的使用