這篇文章主要介紹瞭如何使用HTML5 File介面在web頁面上使用檔案下載，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
File介面提供了與文件相關的信息，並且運行JavaScript在web頁面上去訪問文件中的內容。接下來透過本文給大家介紹HTML5 File介面在web頁面上使用文件下載功能，需要的的朋友參考下
File介面提供了與文件相關的信息，並且運行JavaScript在web頁面上去訪問文件中的內容。
File物件來自於使用者使用input標籤選擇檔案傳回的FileList對象，來自於拖放操作的DataTransfer物件。 File物件是一種特殊的Blob，它能夠在任何能夠使用Blob的上下文中使用。
要在web頁面中使用文件，通常需要涉及的對像有：File對象，FileList對象，FileReader對象。
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物件。它可以用陣列索引的形式去簡寫
File物件
#FileList物件的每一項都是File物件。 File物件是一種特殊的Blob。
File物件的標準屬性
1.lastModified：傳回檔案被修改的時間，這個時間是距離1970年1月1日0點0時0分經過的毫秒數。是一個唯讀屬性
2.name：傳回檔案物件引用的檔案的檔案名，這是一個唯讀屬性
3.type：傳回檔案物件引用的檔案的檔案類型，是MINE type，這個是一個只讀屬性。
4.size：傳回檔案物件所引用的檔案的檔案大小，這個一個只讀屬性。
File物件的標準方法
沒有給File物件單獨定義方法，但是它有從Blob物件那裡繼承來的方法。
FileReader物件
FileReader物件使web應用程式能夠非同步讀取使用者電腦上的檔案。
FileReader()是一個建構函數，透過它可以建立一個新的FileReader物件。
var fileReader = new FileReader();
FileReader物件的標準屬性
##1.error：傳回檔案讀取過程中發生的錯誤。
2.result：傳回檔案的內容，傳回值得類型是String或ArrayBuffer。這個屬性只有在讀取操作完成之後才是合法的。
3.readyState：傳回讀取操作目前的狀態，可能的取值是0：還沒開始讀取，1：正在讀取，2：讀取完成。
FileReader物件的標準方法
#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" alt="Image preview...">
登入後複製
function previewFile() {
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。
FileReader物件的事件
1.abort：終止讀取操作時觸發。
2.error：讀取操作過程中遇到錯誤時觸發。
3.load：讀取操作成功的完成時觸發。
4.loadend：讀取操作結束時觸發。不能是讀取成功還是讀取失敗。
5.loadStart：讀取操作開始時觸發。
6.process：讀取過程中觸發。
在web應用程式中使用文件
使用HTML5中的文件對象，可以存取選擇的本地文件，並且讀取這些文件中的內容。檔案物件要麼來自於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。
第一步：创建一个放置区域。一个普通的元素，如p，p等。
第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。
下面是一个显示缩略图的例子：
<p id='dropbox' class='dropbox'></p>
.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);
}
}登入後複製
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
HTML5中postMessage API的基本使用
如何用HTML5操作WebSQL数据库
HTML5和jQuery实现搜索智能匹配的功能
以上是如何使用HTML5 File介面在web頁面上使用檔案下載的詳細內容。更多資訊請關注PHP中文網其他相關文章！
