Ajax 之文件上傳

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

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

原文站點 時之物語
原文連接 Ajax 之文件上傳