HTML5 的 File API

分享:

在 File API 還沒出來之前,我們是無法從瀏覽器看到本機端要上傳的檔案的資料的,以往能做到都是透過 ajax 傳到伺服器後,再把資料顯示在頁面上來做成這樣的效果,現在有 File API 後我們就不用這麼麻煩,也比較不會因為要把資料先傳到伺服器可能造成容量無謂的浪費。

先來看一下傳統怎麼抓到要上傳的檔案的資料,首先準備一個要上傳的 html

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

接著利用 js 偵測 change 事件後抓到檔案的資料,因為可以多檔上傳,所以我們如果只選一個檔案需要用 files[0] 抓資料

$("#upload").change(function(e){
  var fileData = e.target.files[0]
  console.log(fileData)
})

這樣可以看到整個檔案的資訊,如果要抓到檔名跟檔案大小那些的,就個別把資料取出來就好了

console.log("name: "+fileData.name)
console.log("size: "+fileData.size)
console.log("type: "+fileData.type)

結果如下:

 

這是透過選取的方式,有些網站會透過拖曳的方式把檔案上傳,我們也可以透過 dataTransfer 抓到檔案的資料

這邊準備一個要用來拖曳上傳的區塊:

給他一個樣式,接著我們來抓取拖曳事件:

$("#dragzone").on({
  "dragover": function(event){
    event.preventDefault();
  },
  "drop": function(event){
    let file=event.originalEvent.dataTransfer.files[0];
    event.preventDefault();
    event.stopPropagation();
    console.log(file)
  }
})

 這樣也能抓到從電腦拖曳到瀏覽器的檔案的資料了。

傳統的抓檔案資料抓的就是檔案的資訊,若要抓取檔案內容,就會利用接下來要講的 File API,這邊我們會利用一個 FileReader object,在用以下方式來取得想要抓的內容:

  • readAsText(Blob|File, opt_encoding)

  • readAsDataURL(Blob|File)

  • readAsArrayBuffer(Blob|File)

在之前的檔案下面多一個區塊用來放等等要抓檔案的資訊,先用 readAsText 抓取檔案的文字內容

接著 new FileReader() 並使用 readAsText 來抓取內容,再把抓到的內容呈現在區塊內

//讀取檔案內容
  var reader = new FileReader();
  reader.readAsText(fileData,"UTF-8");
         reader.addEventListener("load",function(event){
   $("#show").text(event.target.result);
})

 

拖曳上傳的部分也一樣

 

接著來做圖片預覽的功能,這次要改成用 readAsDataURL 來讀取要上傳的檔案的資料:

var reader = new FileReader();
reader.readAsDataURL(fileData);

讀取圖片一樣用 event.target.result。

 這樣就可以看到選取圖片的預覽出現在區塊內了。

拖曳的也是一樣的方式:

 

一次選取多張的話使用迴圈把圖片一張一張讀出來:

 拖曳的話則是把檔案的數量用 event.originalEvent.dataTransfer.files.length 在丟到迴圈裡:

 就這樣可以完成預覽要上傳的檔案的效果了。