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

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

要在web頁面中使用文件，通常需要涉及到的對象有：File對象，F(xiàn)ileList對象，F(xiàn)ileReader對象。

FileList對象

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

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

FileList對象的標準屬性

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

FileList對象的標準方法

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

File對象

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

File對象的標準屬性

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

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

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

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

File對象的標準方法

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

FileReader對象

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

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

var fileReader = new FileReader();

FileReader對象的標準屬性

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

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

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

FileReader對象的標準方法

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

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

3.readAsDataURL(Blob):讀取指定的Blob，如一個File對象（File對象是一種特殊的Blob）。只要讀取完成，readyState屬性的值就會變?yōu)?，result屬性是一個表示文件數(shù)據(jù)的URL，并且數(shù)據(jù)格式是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屬性的值就會變?yōu)?，result屬性是一個表示文件數(shù)據(jù)的文本字符串。第二個參數(shù)是可選的，它用于指定result屬性中文本字符串的編碼方式，默認為UTF-8。

FileReader對象的事件

1.abort：終止讀取操作時觸發(fā)。

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

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

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

5.loadStart：讀取操作開始時觸發(fā)。

6.process：讀取過程中觸發(fā)。

在web應用中使用文件

使用HTML5中的文件對象，可以訪問選擇的本地文件，并且讀取這些文件中的內(nèi)容。文件對象要么來自于input元素，要么來自于drag and drop接口。

通過input元素選擇文件

<input type="file" id="input">

訪問通過input選擇的文件

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

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

通過drag and drop接口選擇文件

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

第一步：創(chuàng)建一個放置區(qū)域。一個普通的元素，如div，p等。

第二步：給放置區(qū)添加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武林網(wǎng)網(wǎng)站的支持！