fileReader
HTML5定義了FileReader作為文件API的重要成員用於讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。
FileReader的使用方式非常簡單，可以按照如下步驟創建FileReader對象並調用其方法：
1.檢測瀏覽器對FileReader的支持
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
2.調用FileReader對象的方法
FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面列出了這些方法以及他們的參數和功能，需要注意的是 ，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。
- 方法名 參數 描述
- abort none 中斷讀取
- readAsBinaryString file 將文件讀取為二進制碼
- readAsDataURL file 將文件讀取為 DataURL
- readAsText file, [encoding] 將文件讀取為文本
readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，（也就是提交給后台的base64字符串），Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
3.處理事件
FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。
事件 描述 onabort 中斷時觸發 onerror 出錯時觸發 onload 文件讀取成功完成時觸發 onloadend 讀取完成觸發，無論成功或失敗 onloadstart 讀取開始時觸發 onprogress 讀取中
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
4.一個上傳圖片並預覽的栗子（不是上傳到后台）
html部分
<input type="file" name="file" onchange="showPreview(this)"/> <img style="width: 100px;height: 100px;" id="img"/>
js部分
function showPreview(source) {
console.log(source);//就是這個input元素
var file = source.files[0];
if(window.FileReader){
var oFReader = new FileReader();
//如果要限定上傳文件的類型，可以通過文件選擇器獲取文件對象並通過type屬性來檢查文件類型
var sReg = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
if(!sReg.test(file.type)){
alert("只允許上傳圖片文件");
}
oFReader.onloadend = function(e) {
document.getElementById("img").src = e.target.result;
};
oFReader.readAsDataURL(file);
}
}