## 簡介 在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); ~~~ ## 拖拽 ~~~ <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事件。 ## 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); } } ~~~