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 在丟到迴圈裡：

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