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

方法一：使用js的FileReader对象

1、FileReader对象简介

1.检测浏览器对FileReader的支持

if(window.FileReader) {

     var fr = new FileReader();

     // add your code here

 }

 else {

     alert("Not supported by your browser!");

 }

调用FileReader对象的方法

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

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

abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

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

2. FileReader处理事件简介

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

onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 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>

参考原文：http://www.cnblogs.com/faith3/p/6371477.html