HTML5中FileReader接口

FileReader接口主要用来把文件读入内存，并且读取文件中的数据。FileReader接口提供一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。检查您的浏览器是否对FIleReader接口提供支持

  if(typeof FileReader == 'undefined'){
   result.innerHTML="<p>抱歉，您的浏览器不支持FIleReader</p>";
   file.setAttribute("disabled","disabled");
  }

一、FileReader接口的方法
FileReader接口拥有4个方法，3个用以读取文件，另一个用来将读取过程中断；注意：无论读取成功或失败，方法并不会返回读取结果，结果存储在result属性中

readAsBinaryString:方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过该字符串存储文件。
readAsText:方法有两个参数，第二个参数是文件的编码方法，默认值为UTF-8，将文件以文本方式读取，读取结果是这个文本文件中的内容
readAsDataURL:该方法将文件读取为一串Data URL字符串，该方法事实上是将小文件(图像与html等格式的文件)以一种特殊格式的URL地址形式直接读入页面
二、FileReader接口的事件
FileReader接口用于捕获读取文件时的状态
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发，无论成功或失败
三、FileReader接口的使用示例

<p>
 <input type="file" id="files">
 <input type="button" value="读取图像" onclick="readAsDataURL();">
 <input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
 <input type="button" value="读取文本文件" onclick="readAsText();">
</p>
<!--显示读取结果-->
<div name ="result" id="result"></div>

 var result = document.getElementById("result");
  var file = document.getElementById("files");
  console.log(file);
  if(typeof FileReader == 'undefined'){
   result.innerHTML="<p>抱歉，您的浏览器不支持FIleReader</p>";
   file.setAttribute("disabled","disabled");
  }
//把文件以 Data URL形式写入页面
function readAsDataURL(){
    var singlefile = file.files[0];
    console.log(singlefile);
    //检查是否为图像文件
    if(!/image\/\w+/.test(singlefile.type)){
        alert("请确保文件为图像类型");
        return;
        }
      var reader = new FileReader();
      //将文件以 Data URL形式写入页面
      reader.readAsDataURL(singlefile);
      reader.onload = function(e){
        var result = document.getElementById("result");
        //在页面上显示文件
        result.innerHTML = "<img src='"+this.result+"' alt=''>";
        }
    }

//把文件以二进制形式读入页面
function readAsBinaryString(){
    var singlefile = file.files[0];
    var reader = new FileReader();
    //把文件以二进制形式读入页面
    reader.readAsBinaryString(singlefile,"utf-8");
    reader.onload = function(e){
        var result = document.getElementById("result");
        //在页面显示二进制数据
        result.innerHTML = this.result;
    }
}
//把文件以文本形式读入页面  
function readAsText(){
    var singlefile = file.files[0];
    var reader = new FileReader();
    reader.readAsText(singlefile);
    reader.onload = function(e){
        var result = document.getElementById("result");
        //在页面上显示读入文本
        result.innerHTML = this.result;
    }   
}

四、FileReader接口事件，表示读取文件时不同的读取状态
；通过这个过程，了解按顺序触发了哪些事件

<p>
<input type="file" id="imgfile" />
<input type="button" value="显示图像" onclick="readFile();"/>
</p>
<!--显示读取结果-->
<div name="result" id="imgresult">
</div>
<script>
var file = document.getElementById("imgfile");
var result = document.getElementById("imgresult");
if(typeof FileReader == 'undefined'){
   result.innerHTML="<p>抱歉，您的浏览器不支持FIleReader</p>";
   file.setAttribute("disabled","disabled");
}
function readFile(){
    var singleFile = file.files[0];
    var reader = new FileReader();
    reader.onload = function(e){
        result.innerHTML = '<img src="'+this.result+'" alt=""/>';
        alert("load");
    }
    reader.onprogress = function(e){
        alert("progress");
    }
    reader.onabort = function(e){
        alert("abort");
    }
    reader.onerror = function(e){
        alert("error");
    }
    reader.onloadstart = function(e){
        alert("loadstart");
    }
    reader.onloadend = function(e){
        alert("loadend");
    }
    reader.readAsDataURL(singleFile);
}

事件顺序：loadstart -> progress ->load ->loadend
onprogress事件中可以来编写大文件的读取完成百分比(进度条)

HTML5中FileReader接口

猜你喜欢