JavaScript 中的FileReader对象（实现上传图片预览）

ゝ一纸荒年。 2022-01-06 07:55 194阅读 0赞

## JavaScript 中的FileReader对象（实现上传图片预览） ##

#### 方法一：使用js的FileReader对象 ####

###### 1、FileReader对象简介 ######

1.1 检测浏览器对FileReader的支持 
    if(window.FileReader) {
         var fr = new FileReader();
         // add your code here
     }
     else {
         alert("Not supported by your browser!");
     }

1.2 调用FileReader对象的方法  
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>abort</td> 
   <td>none</td> 
   <td>中断读取</td> 
  </tr> 
  <tr> 
   <td>readAsBinaryString</td> 
   <td>file</td> 
   <td>将文件读取为二进制码</td> 
  </tr> 
  <tr> 
   <td>readAsDataURL</td> 
   <td>file</td> 
   <td>将文件读取为 DataURL</td> 
  </tr> 
  <tr> 
   <td>readAsText</td> 
   <td>file, [encoding]</td> 
   <td>将文件读取为文本</td> 
  </tr> 
 </tbody> 
</table>

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

##### 2. FileReader处理事件简介 #####

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onabort</td> 
   <td>中断时触发</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>出错时触发</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>文件读取成功完成时触发</td> 
  </tr> 
  <tr> 
   <td>onloadend</td> 
   <td>读取完成触发，无论成功或失败</td> 
  </tr> 
  <tr> 
   <td>onloadstart</td> 
   <td>读取开始时触发</td> 
  </tr> 
  <tr> 
   <td>onprogress</td> 
   <td>读取中</td> 
  </tr> 
 </tbody> 
</table>

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

fr.onload = function() { 
        this.result; 
    };

例子1：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>FileReader</title>
    </head>
    <body>
        <p> 
        <label>请选择一个文件：</label> 
            <input type="file" id="file" /> 
            <input type="button" value="读取图像" onclick="readAsDataURL()" /> 
            <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" /> 
            <input type="button" value="读取文本文件" onclick="readAsText()" /> 
        </p> 
        <div id="result" name="result"></div> 
    
    
    <script type="text/javascript"> 
    var result=document.getElementById("result"); 
    var file=document.getElementById("file"); 
    //判断浏览器是否支持FileReader接口 
    if(typeof FileReader == 'undefined'){ 
        result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; 
        //使选择控件不可操作 
        file.setAttribute("disabled","disabled"); 
    } 
    
    function readAsDataURL(){ 
        //检验是否为图像文件 
        var file = document.getElementById("file").files[0]; 
        if(!/image\/\w+/.test(file.type)){ 
            alert("看清楚，这个需要图片！"); 
            return false; 
        } 
        var reader = new FileReader(); 
        //将文件以Data URL形式读入页面 
        reader.readAsDataURL(file); 
        reader.onload=function(e){ 
            var result=document.getElementById("result"); 
            //显示文件 
            result.innerHTML='<img src="' + this.result +'" alt="" />'; 
        } 
    } 
    
    function readAsBinaryString(){ 
        var file = document.getElementById("file").files[0]; 
        var reader = new FileReader(); 
        //将文件以二进制形式读入页面 
        reader.readAsBinaryString(file); 
        reader.onload=function(f){ 
            var result=document.getElementById("result"); 
            //显示文件 
            result.innerHTML=this.result; 
        } 
    } 
    
    function readAsText(){ 
        var file = document.getElementById("file").files[0]; 
        var reader = new FileReader(); 
        //将文件以文本形式读入页面 
        reader.readAsText(file); 
        reader.onload=function(f){ 
            var result=document.getElementById("result"); 
            //显示文件 
            result.innerHTML=this.result; 
        } 
    } 
    
    </script> 
    
    </body>
    </html>

###### 3 、使用js的FileReader对象实现上传图片时的图片预览功能 ######

<!DOCTYPE html>
    <html>
       <head>
       <meta  name="viewport"  content="width=device-width,initial-scale=1, user-scalable=no">
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="format-detection" content="telephone=no">
       <title>test</title>
       <script>
    　　　　//选择图片时预览功能
    　　　　function imageshow(source){
                       var file = source.files[0];
                       var imageid = source.id;
                       if (window.FileReader) {
                           var fr = new FileReader();
                           fr.onloadend = function(e) {
                              document.getElementById("portrait"+imageid).src = e.target.result;
                           };
                           fr.readAsDataURL(file);
                      }
    　　　　document.getElementById("image"+imageid).style.display="none";
           document.getElementById("show"+imageid).style.display="block";
    　　    }
      </script>
      </head>
    <body>
    <div>
          <div id="image1" >
    　　　　　　<p>上传截图</p>
              <input type="file" name="screenshot1" id="1" onchange="imageshow(this)"/>
          </div>
    　　　　<div id="show1" style="display:none;">
    　　　　　　<img  src="" id="portrait1" width="100" height="70">
    　　　　</div>
    　　　　<div id="image2">
              <p>上传截图</p>
              <input type="file" name="screenshot2" id="2" onchange="imageshow(this)"/>
          </div>
    　　　 <div id="show2" style="display:none;">
    　　　　　　<img  src="" id="portrait2" width="100" height="70">
    　　　</div>
             <div id="image3">
                <p>上传截图</p>
                <input type="file" name="screenshot3" id="3" onchange="imageshow(this)"/>
             </div>
        　　<div id="show3" style="display:none;">
    　　　　　　<img  src="" id="portrait3" width="100" height="70" >
    　　　　</div>
    </div> 
    </body>
    </html>

### 方法二：使用window.createObjectURL ###

###### 直接上代码： ######

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>图片上传预览</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script> 
    </head> 
    <body> 
    <form name="form0" id="form0" > 
    <input type="file" name="file0" id="file0" multiple="multiple" />
    <br>
    <img src="" width="100" height="100" id="img0" > 
    </form> 
    <script> 
    $("#file0").change(function(){ 
    　　var objUrl = getObjectURL(this.files[0]) ; 
    　　console.log("objUrl = "+objUrl) ; 
    　　if (objUrl) { 
    　　　　$("#img0").attr("src", objUrl) ; 
    　　} 
    }) ; 
    
    //取得该文件的url 
    function getObjectURL(file) { 
    　　var url = null ; 
    　　if (window.createObjectURL!=undefined) { 
    　　　　url = window.createObjectURL(file) ; 
    　　} else if (window.URL!=undefined) { 
    　　　　url = window.URL.createObjectURL(file) ; 
    　　} else if (window.webkitURL!=undefined) { 
    　　　　url = window.webkitURL.createObjectURL(file) ; 
    　　} 
    　　return url ; 
    } 
    </script> 
    </body> 
    </html>