HTML5 File接口在web頁面上使用文件下載

File接口提供了與文件相關的信息，並且運行JavaScript在web頁面上去訪問文件中的內容。

File對象來自於用戶使用input標籤選擇文件返回的FileList對象，來自於拖放操作的DataTransfer對象。 File對像是一種特殊的Blob，它能夠在任何能夠使用Blob的上下文中使用。

要在web頁面中使用文件，通常需要涉及到的對像有：File對象，FileList對象，FileReader對象。

FileList來自於兩個地方，分別是input元素的files屬性以及drag and drop API(當拖動文件時，event.DataTransfer.files就是一個FileList對象)

 <input id=fileItem type=file>var fileList = document.getElementById('fileItem').files

length：這個一個只讀屬性，這個屬性返回FileList對像中包含的File對象的長度。

item(index):取得FileList對像中指定位置的File對象。它可以用數組索引的形式去簡寫

FileList對象的每一項都是File對象。 File對像是一種特殊的Blob。

1.lastModified：返回文件被修改的時間，這個時間是距離1970年1月1日0點0時0分經過的毫秒數。是一個只讀屬性

2.name：返回文件對象引用的文件的文件名，這是一個只讀屬性

3.type：返回文件對象引用的文件的文件類型，是MINE type，這個是一個只讀屬性。

4.size：返回文件對象引用的文件的文件大小，這個一個只讀屬性。

沒有給File對象單獨定義方法，但是它有從Blob對像那兒繼承來的方法。

FileReader對象使web應用能夠異步讀取用戶計算機上的文件。

FileReader()是一個構造函數，通過它可以創建一個新的FileReader對象。

var fileReader = new FileReader();

1.error：返回文件讀取過程中發生的錯誤。

2.result：返回文件的內容，返回值得類型是String或者ArrayBuffer。這個屬性只有在讀取操作完成之後才是合法的。

3.readyState：返回讀取操作當前的狀態，可能的取值是0：還沒有開始讀取，1：正在讀取，2：讀取完成。

1.abort():中斷讀取操作。 readyState的值變成2.

2.readAsArrayBuffer(Blob):讀取指定的Blob，如一個File對象（File對像是一種特殊的Blob）。只要讀取完成，readyState屬性的值就會變為2，result屬性是一個表示文件數據的ArrayBuffer。

3.readAsDataURL(Blob):讀取指定的Blob，如一個File對象（File對像是一種特殊的Blob）。只要讀取完成，readyState屬性的值就會變為2，result屬性是一個表示文件數據的URL，並且數據格式是base64編碼的字符串

<input type=file onchange=previewFile()><br><img src= height=200 var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]'). files[0]; var reader = new FileReader(); reader.addEventListener(load, function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); }}

4.readAsText(Boob,encoding):讀取指定的Blob，如一個File對象（File對像是一種特殊的Blob）。只要讀取完成，readyState屬性的值就會變為2，result屬性是一個表示文件數據的文本字符串。第二個參數是可選的，它用於指定result屬性中文本字符串的編碼方式，默認為UTF-8。

1.abort：終止讀取操作時觸發。

2.error：讀取操作過程中遇到錯誤時觸發。

3.load：讀取操作成功的完成時觸發。

4.loadend：讀取操作結束時觸發。不能是讀取成功還是讀取失敗。

5.loadStart：讀取操作開始時觸發。

6.process：讀取過程中觸發。

使用HTML5中的文件對象，可以訪問選擇的本地文件，並且讀取這些文件中的內容。文件對像要麼來自於input元素，要么來自於drag and drop接口。

<input type=file id=input>

訪問通過input選擇的文件

var selectedFile = document.getElementById('input').files[0];

上述代碼段一次只能選擇一個文件，如果一次要選擇多個文件，就需要給input元素添加一個multiple屬性，並將multiple屬性設置我true。在Gecko 1.9.2之前不支持一次選擇多個文件。

關於drag and drop接口可以查看HTML5 DragEvent。

第一步：創建一個放置區域。一個普通的元素，如div，p等。

第二步：給放置區添加drop，dragenter，dragover事件處理程序。其中起關鍵作用的是drop事件處理程序。

下面是一個顯示縮略圖的例子：

 <div id='dropbox' class='dropbox'></div>.dropbox{ border:solid 3px red; height:400px; width:auto; }

 var dropbox;dropbox = document.getElementById(dropbox);//註冊事件處理程序dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false) ;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; handleFiles(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; dropBox .appendChild(img); var reader = new FileReader(); reader.onload = function() { img.src = reader.result; }; reader.readAsDataURL(file); }}

以上所述是小編給大家介紹的HTML5 File接口在web頁面上使用文件下載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！