HTML5中FileReader接口

野性酷女 2022-05-31 10:23 197阅读 0赞

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

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

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

1.  readAsBinaryString:方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过该字符串存储文件。
2.  readAsText:方法有两个参数，第二个参数是文件的编码方法，默认值为UTF-8，将文件以文本方式读取，读取结果是这个文本文件中的内容
3.  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事件中可以来编写大文件的读取完成百分比(进度条)