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
