此文引用：http://blog.csdn.net/jackfrued/article/details/8967667
一：FileReader
FileReader是API重要成員用於讀取文件，FileReader接口提供了讀取文件的方法和包含讀取事件結果的事件模型；
二：FileReader事件的方法
FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取
1： readAsDataURL 參數file 將文件讀取為 DataURL
這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
2： readAsText 參數 file [encoding] 將文件讀取為文本
該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
3： readAsBinaryString 參數 file 將文件讀取為二進制碼
該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
4： abort 參數 none 中斷讀取
注意：無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。
三：處理事件
FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。
onabort 中斷時觸發- onerror 出錯時觸發
- onload 文件讀取成功完成時觸發
- onloadend 讀取完成觸發，無論成功或失敗
- onloadstart 讀取開始時觸發
- onprogress 讀取中
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
四：實例應用
1.檢測瀏覽器對FileReader的支持
if(window.FileReader) {
var fr = new FileReader(); // add your code here
} else {
alert("Not supported by your browser!");
}
2. 如果要限定上傳文件的類型，可以通過文件選擇器獲取文件對象並通過type屬性來檢查文件類型（判斷圖片文件）
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型"); return false;
}
不難發現這個檢測是基於正則表達式的，因此可以進行各種復雜的匹配，非常有用。
<div class='container'>
<input type="file" multiple id="selectFile" />
<div class='iconBox'></div>
</div>
<script type="text/javascript">
document.querySelector('input[type=file]').onchange = function (){
// 1 創建文件讀取對象 實例化一個讀取器
var reader = new FileReader();
// 0 通過當前的file標簽 獲取選擇的文件信息
console.log(this.files);
// 2 調用該對象的方法 讀取文件 文件
// 讀取文件是一個耗時操作 不一定什么時候讀取完畢
reader.readAsDataURL(this.files[0]);
// reader.readAsDataURL(f);
// 3 添加事件 當文件過大，不能立即讀完 通過事件監聽進度
// 耗時操作 通過事件的方式進行注冊 並且回調
reader.onload = function (){
// 使用讀取完畢的文件
console.log(reader.result);
//使用返回的結果 即可
document.querySelector('.iconBox').style.background = 'url('+ reader.result+') no-repeat center/cover';
}
}
</script>