- 創建FileReader對象；
var Reader = new FileReader - 調用FileReader對象的方法：
FileReader的實例方法有4個，3個是用于讀取文件，另一個用于中斷讀取，需要注意：無論讀取是否成功或者失敗，方法不會返回讀取結果，結果儲存在result屬性中。
- abort()： 中斷讀取操作，在返回時，readyState的屬性值為DONE；
- readAsBinaryString(file)： 開始讀取file對象中的內容，當讀取操作完成時，readyState屬性的值會為DONE，如果設置了onloadend事件，則調用之，同時，result屬性中講包括所讀取的原始二進制數據；
- readAsDataURL(file)： 開始讀取file對象中的內容，當讀取操作完成時，readyState屬性的值會為DONE，如果設置了onloadend事件，則調用之，同時，result屬性中將包含一個data：URL格式的字符串以表示所讀取的內容；
- readAaText(file, encoding) : 開始讀取file對象中的內容，當讀取操作完成時，readyState屬性的值會為DONE，如果設置了onloadend事件，則調用之，同時，result屬性將包含一個字符串以表示所取得文件內容；有2個參數，第二個可選，一個字符串，表示了返回數據所使用的的編碼，如果不指定，默認UTF-8。
- 事件處理；
- onabort: 讀取操作被終止時調用。
- onerror: 當讀取操作發生錯誤時調用；
- onload: 讀取操作成功完成時調用；
- onloadend: 當讀取操作完成時調用，不管是成功還是失敗，該處理程序在onload或者onerror之后調用;
- onloadstart : 當讀取操作將要開始之前調用；
- progrees： 在讀取數據過程中周期性調用；
實例代碼：
<!--html-->
<div id="test-image-preview"></div>
<input type="file" name="file" id="test-image-file">
<div id="test-image-info"></div>
//javaScript
var fileInput = document.getElementById("test-image-file"),
info = document.getElementById("test-image-info"),
preview = document.getElementById("test-image-preview");
//添加change事件，元素發生改變從發
fileInput.addEventListener("change", function() {
// 添加背景圖片
preview.style.backgroundImage = "";
//檢查文件是否存在
if (!fileInput.value) {
info.innerHTML = "沒有文件"
return;
}
//獲取file引用
var file = fileInput.files[0];
console.log(file); //返回file對象
info.innerHTML = "文件" + file.name + "<br>" +//返回當前文件的名稱
"大小" + file.size + "<br>" + //返回當前文件的大小
"修改" +file.lastModifiedDate; //返回當前file對象引用的文件最后修改事件
//判斷文件是否是圖片類型
if (file.type !== "image/jpeg" && file.type !=="image/png" && file.image !== image/gif) {
alert("不是圖片文件");
return;
}
//創建一個reader讀取文件
var reader = new FileReader() // FileReader()構造函數用于讀取文件
reader.onload = function(e) {//onload事件，在文件讀取成功時觸發
var data = e.target.result;// 當前事件觸發返回的值，也就是說，是onload事件觸發后的值
preview.style.backgroundImage = "url(" + data + ")";
}
// DataURL的形式讀取文件;
reader.readAsDataURL(file);
});
代碼演示了通過FIleReader方法讀取文件內容。
