首頁 >web前端 >H5教程 >如何使用HTML5 File介面在web頁面上使用檔案下載

如何使用HTML5 File介面在web頁面上使用檔案下載

不言原創: 2018-06-09 17:41:252267瀏覽

這篇文章主要介紹瞭如何使用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(&#39;fileItem&#39;).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(&#39;img&#39;);
  var file    = document.querySelector(&#39;input[type=file]&#39;).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(&#39;input&#39;).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=&#39;dropbox&#39; class=&#39;dropbox&#39;></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 File介面在web頁面上使用檔案下載

相關文章