3分钟上手JS中的FileReader对象（实现上传图片预览）

详见原文：
https://www.cnblogs.com/LO-gin/p/6817319.html

方法一：使用js的FileReader对象
1、FileReader对象简介
检测浏览器对FileReader的支持

if(window.FileReader) {
     var fr = new FileReader();
     // add your code here
 }
 else {
     alert("Not supported by your browser!");
 }

调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，

需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

1575299829(1).png

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

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

1575299617(1).jpg

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

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

例子：

<!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>

jianshu.png