怎么使用HTML5 File接口在web頁(yè)面上使用文件下載

小編給大家分享一下怎么使用HTML5 File接口在web頁(yè)面上使用文件下載，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

File接口提供了與文件相關(guān)的信息，并且運(yùn)行JavaScript在web頁(yè)面上去訪問(wèn)文件中的內(nèi)容。接下來(lái)通過(guò)本文給大家介紹HTML5 File接口在web頁(yè)面上使用文件下載功能，需要的的朋友參考下

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

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

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

FileList對(duì)象

FileList來(lái)自于兩個(gè)地方，分別是input元素的files屬性以及drag and drop API(當(dāng)拖動(dòng)文件時(shí)，event.DataTransfer.files就是一個(gè)FileList對(duì)象)

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

FileList對(duì)象的標(biāo)準(zhǔn)屬性

length：這個(gè)一個(gè)只讀屬性，這個(gè)屬性返回FileList對(duì)象中包含的File對(duì)象的長(zhǎng)度。

FileList對(duì)象的標(biāo)準(zhǔn)方法

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

File對(duì)象

FileList對(duì)象的每一項(xiàng)都是File對(duì)象。File對(duì)象是一種特殊的Blob。

File對(duì)象的標(biāo)準(zhǔn)屬性

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

2.name：返回文件對(duì)象引用的文件的文件名，這是一個(gè)只讀屬性

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

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

File對(duì)象的標(biāo)準(zhǔn)方法

沒(méi)有給File對(duì)象單獨(dú)定義方法，但是它有從Blob對(duì)象那兒繼承來(lái)的方法。

FileReader對(duì)象

FileReader對(duì)象使web應(yīng)用能夠異步讀取用戶計(jì)算機(jī)上的文件。

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

var fileReader = new FileReader();

FileReader對(duì)象的標(biāo)準(zhǔn)屬性

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

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

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

FileReader對(duì)象的標(biāo)準(zhǔn)方法

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

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

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

FileReader對(duì)象的事件

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

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

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

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

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

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

在web應(yīng)用中使用文件

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

通過(guò)input元素選擇文件

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

訪問(wèn)通過(guò)input選擇的文件

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

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

通過(guò)drag and drop接口選擇文件

關(guān)于drag and drop接口可以查看HTML5 DragEvent。

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

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

下面是一個(gè)顯示縮略圖的例子：

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

var dropbox;
dropbox = document.getElementById("dropbox");
//注冊(cè)事件處理程序
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);
  }
}

看完了這篇文章，相信你對(duì)怎么使用HTML5 File接口在web頁(yè)面上使用文件下載有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！