要想在頁面上顯示本地圖片，以前我們通常的做法是將選擇的圖片文件上傳至后端服務(wù)器慌申，后端對其進(jìn)行存儲雷激，再將圖片的URL返回到前端，前端通過這個URL來顯示圖片厨幻。而HTML5的FileReader接口支持本地預(yù)覽相嵌，F(xiàn)ileReader接口主要是將文件讀入內(nèi)存腿时，并提供相應(yīng)的方法，來讀取文件中的數(shù)據(jù)饭宾，當(dāng)然就能顯示本地圖片不需上傳了批糟。目前高級瀏覽器實現(xiàn)了FileReader接口，所以像IE6這些老東西直接滾粗看铆。
在此之前徽鼎，我們有文章：HTML5應(yīng)用之文件拖拽上傳，看完這篇文章后弹惦，你可以嘗試制作一個拖拽和顯示圖片否淤、編輯圖片、最后上傳的功能肤频。
HTML
<p>
<label>請選擇一個圖像文件：</label>
<input type="file" id="file_input" />
</p>
<div id="result"></div>
Javascript
通過getElementById獲取節(jié)點叹括，判斷瀏覽器的兼容性，對于不支持FileReader接口的瀏覽器將給出一個提示并禁用input宵荒，否則監(jiān)聽input的change事件汁雷。
var result = document.getElementById("result");
var input = document.getElementById("file_input");
if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
然后报咳，當(dāng)file_input的change事件觸發(fā)時侠讯，調(diào)用函數(shù)readFile()。在readFile中暑刃，我們首先獲取file對象厢漩，然后通過file的type屬性來檢測文件類型，我們當(dāng)然只允許選擇圖像類型的文件岩臣，然后我們new一個FileReader實例溜嗜，并調(diào)用readAsDataURL方法來讀取選中的圖像文件，最后在onload事件中架谎，獲取到成功讀取的文件內(nèi)容炸宵，并以插入一個img節(jié)點的方式顯示選中的圖片。
function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必須為圖片谷扣！");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
完整頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<label>請選擇一個圖像文件：</label>
<input type="file" id="file_input" />
</p>
<div id="result"></div>
<script type="text/javascript">
var result = document.getElementById("result");
var input = document.getElementById("file_input");
if(typeof FileReader==='undefined'){
result.innerHTML = "抱歉土全，你的瀏覽器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必須為圖片！");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
</script>
</body>
</html>
本文來源: 作者h(yuǎn)elloweba.com, 鏈接FileReader：讀取本地圖片文件并顯示
