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

Posted 2021-03-16 zjx304

 

选择所有图片文件

<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
      }