## File API **3、文件系統API** **3.1 File API** 在HTML5中新增了File API，可以讓網頁要求用戶選擇本地文件，并且讀取這些文件的信息。選擇的方式可以是HTML`<input>`元素，也可以是拖拽。 ``` <input type="file" id="photo"> var selectedFile = document.getElementById('photo'); var file = selectedFile.files[0]; //或者 file = selectedFile.files.item(0) ``` `selectedFile.files`返回一個FileList對象（有一個屬性`length`，表示文件（File對象）個數），包含了一個或多個File對象，每個File對象都有自己的屬性： - `file.name`：文件名，該屬性只讀。 - `file.size`：文件大小，單位為字節，該屬性只讀。 - `file.type`：文件的MIME類型，如果分辨不出類型，則為空字符串，該屬性只讀。 - `file.lastModified`：文件的上次修改時間，格式為時間戳。 - `file.lastModifiedDate` ：文件的上次修改時間，格式為Date對象實例。 注意：如果要允許用戶選取多個文件，需要加上`multiple`屬性 ``` <input type="file" multiple /> ``` 一般情況下，我們會為input注冊`change`事件，當文件被選擇時，觸發change。 ``` selectFile.addEventListener('change',function(){ var fileList = this.files; for(var i = 0; i < fileList.length; i++){ var file = fileList[i]; //或者 fileList.item(0); } },false); ``` **3.1.1 拖拽文件** 前面也說過，我們也可以通過拖拽方式選擇文件。 ``` <div id="dropbox"></div> dropbox = document.getElementById('dropbox'); dropbox.addEventListener('dragenter',dragenter,false); dropbox.addEventListener('dragover',dragover,false); dropbox.addEventListener('drop',drop,false); ``` 在上面的代碼中，ID為dropbox的div就是我們拖放目的區域。 拖放事件： ``` function dragenter(e){ e.stopPropagation(); e.preventDefault(); } function dragover(e){ e.stopPropagation(); e.preventDefault(); } function drop(e){ e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; } ``` 在上面的代碼中，參數e是一個事件對象，該參數的dataTransfer.files屬性就是一個FileList對象，里面包含了拖放的文件。 注意：使用拖放事件時，必須阻止dragenter和dragover事件的默認行為，才能觸發drop事件。 **3.1.2 FileReader API** 在上面我們知道如何獲取文件信息，如何使用呢？ 這時我們就要用到`FileReader API`了，此API用于讀取文件，，即把文件內容讀入內存。它的參數是File對象或Blob對象。 首先，我們需要實例化FileReader對象： ``` var reader = new FileReader(); ``` 對于不同類型的文件，FileReader提供了不同的方法來讀取文件： - `readAsBinaryString(Blob|File)`：返回二進制字符串，該字符串每個字節包含一個0到255之間的整數。 - `readAsText(Blob|File, opt_encoding)`：返回文本字符串。默認情況下，文本編碼格式是’UTF-8’，可以通過可選的格式參數，指定其他編碼格式的文本。 - `readAsDataURL(Blob|File)`：返回一個基于Base64編碼的data-uri對象。 - `readAsArrayBuffer(Blob|File)`：返回一個ArrayBuffer對象，即固定長度的二進制緩存數據。 我們來看一個顯示用戶所選圖片的縮略圖的例子： ``` <input type="file" onchange="handleFiles(this.files)"/> function handleFiles(files){ for(var i = 0; i < files.length; i++){ var file = files[i]; var imageType = /^image\//; if(!imageType.test(file.type)) continue; var img = document.createElement('img'); img.file = file; document.body.appendChild(img); var reader = new FileReader(); reader.onload = function(e){ img.src=e.target.result; }; reader.readAsDataURL(file); } } ``` 在上面的代碼中，我們通過onchange去監聽input內文件信息的變化，通過file.type判斷用戶選擇的是否是圖片，這里使用File對象的readAsDataURL()方法來返回一個data URL，然后使用onload事件監聽文件是否讀取完畢，如果讀取完畢，我們就可以事件對象e來讀取文件內容，也就是e.target.result； `readAsDataURL()`方法用于讀取文本文件，它的第一個參數是File或Blob對象，第二個參數是前一個參數的編碼方法，如果省略就默認為UTF-8編碼。該方法是異步方法，一般監聽onload件，用來確定文件是否加載結束，方法是判斷FileReader實例的result屬性是否有值。其他三種讀取方法，用法與readAsDataURL方法類似。 注意：如果瀏覽器不支持FileReader，你也可以使用URL.createObjectURL(file)方法來創建一個data URL來顯示圖片縮略圖。 FileReader API還有一個`abort`方法，用于中止文件上傳。 FileReader API的其他監聽事件 - onabort方法：讀取中斷或調用reader.abort()方法時觸發。 - onerror方法：讀取出錯時觸發。 - onload方法：讀取成功后觸發。 - onloadend方法：讀取完成后觸發，不管是否成功。觸發順序排在 onload 或 onerror 后面。 - onloadstart方法：讀取將要開始時觸發。 - onprogress方法：讀取過程中周期性觸發。