文件读取FileReader

Posted 2020-10-07

file:对于file类型的input框可以获取上传的文件，在input里设置里multiple了后，就可以上传多个文件了。FileReader是h5新增的一个属性，用于读取上传的文件他的操作是这样

//设置一个文件读取器
?
var fr= new FileReader();
?
//通过两种方式读取文件
?
readAsText：用文本的方式读取文件；
?
readAsDataURL：用DataURL的方式读取文件 （较常用）；
?
//文件读取完成事件
?
fr.onload=function(){ }
?
//获取文件读取结果（图片文件可以赋值给img);
?
fr.result
?

 

demojs部分：

//找对象
?
  var file=document.getElementById("f");
?
  var img=document.getElementById("portrait");
?
  var bigImg=document.getElementById("bigImg");
?
  //注册事件
?
  file.addEventListener("change",function () {
?
    //file存储了所有上传的文件
    //data就是指上传的文件
?
   var data=file.files[0];
?
    //如果浏览器兼容
    if(window.FileReader){
      //创建一个文件读取器
      fr=new FileReader();
      //让文件读取器读取整个文件
      fr.readAsDataURL(data);
?
//      给fr注册文件加载事件
?
      fr.onload=function () {
        img.src=fr.result;
        bigImg.src=fr.result;
      }
    }
?
  })
?
 html:
?
  var file=document.getElementById("f");
?
  var img=document.getElementById("portrait");
?
  var bigImg=document.getElementById("bigImg");