Ajax 之檔案上傳

Z-index發表於2018-06-03

enter image description here

FormData

簡單的上傳例子

/*
  先在 html 裡面準便好 <input class="file-input" tpye="file" /> 標籤
*/

var fileInput = document.querySelector('.file-input');
var formData = new FormData();ar fileInput = document.querySelector('.file-input');
var formData = new FormData();

//新增 formData 上傳檔案
fileInput.onchange = function(e){
  formData.append("fileIn", this.value);
}

//上傳檔案
var request = new XMLHttpRequest();
request.open("POST", "/ajax.php");
request.send(formData);/*
  先在 html 裡面準便好 <input class="file-input" tpye="file" /> 標籤
*/

var fileInput = document.querySelector('.file-input');
var formData = new FormData();

//新增 formData 上傳檔案
fileInput.onchange = function(e){
  formData.append("fileIn", this.value);
}
//上傳檔案
var request = new XMLHttpRequest();
request.open("POST", "/ajax.php");
request.send(formData);

解讀步驟

  1. fileInput 的 dom 物件獲取， FormData 物件生成；
  2. 使用 fileInput 的 onchange 事件來獲取，檔案的內容；
  3. 使用 formData 的 append 方法來新增一個新值到 formData 裡面來；
  4. 使用 XMLHttpRequest 的 send 的方法來上傳檔案；

原理說明

FormData 物件其實不止是可以用來上傳檔案，如同其名，可以模擬一系列表單控制元件的鍵值對，然後用於 XMLHttpRequest 的提交，其最大的優點就是可以非同步上傳一個二進位制檔案；

FormData 是無法讀取檔案的，其核心就是通過 append()，將檔案變成新增欄位，來上傳檔案；

FileReader

簡單的讀取檔案例子

/*
  先在 html 裡面準便好 <input class="file-input" tpye="file" /> 標籤
*/

var fileInput = document.querySelector('.file-input');
// 建立 FileReader 物件
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // 獲取原聲 File 物件
  var file = event.target.files[0];
  // 以二進位制讀取檔案物件
  fileReader.readAsArrayBuffer(file);
  //fileReader.readAsDataURL(file); // 以data:URL 格式的字串以表示讀取檔案的內容
  //fileReader.readAsText(file); //以字串形式表示讀取到的檔案內容
}

// 讀取操作完成後
fileReader.onload = function (e) {
  console.log(e)
}

解讀步驟

  1. 建立 FileReader 物件；
  2. 通過 fileInput 的 dom 物件 onchange 的方法， 獲取原始 File 物件；
  3. 通過 FileReader 中其中一種讀取方式，讀取原始 File 物件；
  4. 通過 FileReader 的 onload 方法獲取來繼續讀取完成後的操作；

原理說明

一般來說，讀取檔案應用場景應該是需要作斷點續存的時候，或者想要預覽上傳的圖片；

預覽圖片例子

var fileInput = document.querySelector('.file-input');
var imgSrc = document.querySelector('.img')
// 建立 FileReader 物件
var fileReader = new FileReader();

fileInput.onchange = function(e){
  // 獲取原聲 File 物件
  var file = event.target.files[0];

  fileReader.readAsDataURL(file); // 以data:URL 格式的字串以表示讀取檔案的內容
}

// 讀取操作完成後
fileReader.onload = function (e) {
  console.log(e)
  imgSrc.src = e.target.result
}

由於本人使用 FileReader 得並不多，所以這裡不作詳細討論了，有興趣的同學可以，直接去看MDN文件

總結

雖然上傳檔案很早就嘗試過了，但是當時理解並不是很深入，而且加上最近幾次在這方面知識的打擊，有點不太能認了；

感謝 白白 的幾次指導，（指導了好幾次，本人還是忘了)

感謝 MDN 提供的文件給予我一定的靈感 - FormData 物件的使用 - FileReader

感謝閱讀，歡迎指出文章的不足之處，以及討論更多的程式碼優化

原文站點 [時之物語](https://z-index.me/

原文連結 Ajax 之檔案上傳

相關文章