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 之文件上傳