1. 程式人生 > >文件讀取FileReader

文件讀取FileReader

部分 clas 文件讀取 text cti nbsp data res ner

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");
 

文件讀取FileReader