摘要：創(chuàng)建新對象屬性讀取文件時發(fā)生的錯誤表明對象的當前狀態(tài)讀取到的文件內(nèi)容，只在讀取操作完成后才有效，數(shù)據(jù)格式取決于采用的讀取操作方法中止該讀取操作。以純文本的形式讀取，中的數(shù)據(jù)為字符串。屬性中將包含一個格式的字符串。讀取文件的二進制源碼。

file對象的來源一般分為３種：

（１）在元素上選擇上傳文件后返回的Filelist對象；
（２）由拖放操作產(chǎn)生的DataTransfer對象；
（３）HTMLCanvasElement的mozGetAsFile() API；

此處討論的是第一種，獲取file對象：

let file = e.target.files[0];//獲取file 對象，當上傳多個文件（圖片）時，０表示第一個

屬性：

lastModified:　1496803445926;//所引用文件最后修改時間
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最后修改時間的 Date 對象
name: "多Y圖.svg";//所引用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互聯(lián)網(wǎng)郵件擴展類型
webkitRelativePath: "";//返回 File 相關的 path 或 URL

另，多張圖片的上傳原理類似，需注意以下三點：

1.設置multiple
2.通過循環(huán)取出每張圖片，放到指定地方
3.每次循環(huán)的時候重新new FileReader()對象

FileReader() 允許web應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

let reader = new FileReader();//創(chuàng)建新對象

屬性:

    error: 讀取文件時發(fā)生的錯誤；
    readyState: 表明FileReader對象的當前狀態(tài)；
    result: 讀取到的文件內(nèi)容，只在讀取操作完成后才有效，數(shù)據(jù)格式取決于采用的讀取操作；
               

方法:

abort()： 中止該讀取操作。

readAsText(file, encoding)：以純文本的形式讀取，result中的數(shù)據(jù)為字符串。

readAsDataURL(file)：result屬性中將包含一個data:url格式的字符串。

readAsArrayBuffer(file): result屬性中將包含一個ArrayBuffer對象。

readAsBinaryString(file)：讀取文件的二進制源碼。

事件處理程序

onabort: 當讀取操作被中止時調(diào)用

onerror：當讀取操作發(fā)生錯誤時調(diào)用

onload: 當讀取操作成功完成時調(diào)用

onloadend: 當讀取操作完成時（不管成功還是失?。?，在onload或者onerror之后調(diào)用

onloadstart: 當讀取操作將要開始時調(diào)用

onprogress: 在讀取數(shù)據(jù)過程中周期性調(diào)用