要想在頁面上顯示本地圖片，之前咱們一般的作法是將選擇的圖片文件上傳至後端服務器，後端對其進行存儲，再將圖片的URL返回到前端，前端經過這個URL來顯示圖片。而HTML5的FileReader接口支持本地預覽，FileReader接口主要是將文件讀入內存，並提供相應的方法，來讀取文件中的數據，固然就能顯示本地圖片不需上傳了。目前高級瀏覽器實現了FileReader接口，因此像IE6這些老東西直接滾粗。前端
在此以前，咱們有文章：HTML5應用之文件拖拽上傳，看完這篇文章後，你能夠嘗試製做一個拖拽和顯示圖片、編輯圖片、最後上傳的功能。web
HTML
第一步建立html，咱們在頁面中放置一個文件選擇的input#file_input和一個顯示結果的div#result。後端
<p>
<label>請選擇一個圖像文件：</label>
<input type="file" id="file_input" />
</p>
<div id="result"></div>
Javascript
經過getElementById獲取節點，判斷瀏覽器的兼容性，對於不支持FileReader接口的瀏覽器將給出一個提示並禁用input，不然監聽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);
}
而後，當file_input的change事件觸發時，調用函數readFile()。在readFile中，咱們首先獲取file對象，而後經過file的type屬性來檢測文件類型，咱們固然只容許選擇圖像類型的文件，而後咱們new一個FileReader實例，並調用readAsDataURL方法來讀取選中的圖像文件，最後在onload事件中，獲取到成功讀取的文件內容，並以插入一個img節點的方式顯示選中的圖片。服務器
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=""/>'
}
}
怎麼樣，能夠看來咱們並無和後臺交互就能將本地圖片顯示在頁面中，最後咱們來了解下FileReader的方法和事件。函數
FileReader的方法和事件
| 參數/事件 | 描述 |
| 方法 | |
| abort | 中斷讀取 |
| readAsText(file, [encoding]) | 將文件讀取爲文本 該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。 |
| readAsBinaryString(file) | 將文件讀取二進制碼 一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件 |
| readAsDataURL(file) | 將文件讀取爲DataURL 將文件讀取爲一串Data URL字符串，將小文件以一種特殊格式的URL地址直接讀入頁面。小文件指圖像與html等格式的文件。 |
| 事件 | |
| onabort | 數據讀取中斷時觸發 |
| onerror | 數據讀取出錯時觸發 |
| onloadstart | 數據讀取開始時觸發 |
| onload | 數據讀取成功完成時觸發 |
| onloadend | 數據讀取完成時觸發，不管成功失敗 |