Ajax 之文件上傳

tomato 發布于2019-08-26 11:58 / 2896人閱讀

摘要：簡單的上傳例子先在里面準便好標簽添加上傳文件上傳文件解讀步驟的對象獲取，對象生成使用的事件來獲取，文件的內容使用的方法來添加一個新值到里面來使用的的方法來上傳文件原理說明對象其實不止是可以用來上傳文件，如同其名，可以模擬一系列表單控件的

FormData 簡單的上傳例子

/*
  先在 html 里面準便好  標簽
*/

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);

解讀步驟

fileInput 的 dom 對象獲取， FormData 對象生成；

使用 fileInput 的 onchange 事件來獲取，文件的內容；

使用 formData 的 append 方法來添加一個新值到 formData 里面來；

使用 XMLHttpRequest 的 send 的方法來上傳文件；

原理說明

FormData 對象其實不止是可以用來上傳文件，如同其名，可以模擬一系列表單控件的鍵值對，然后用于 XMLHttpRequest 的提交，其最大的優點就是可以異步上傳一個二進制文件；

FormData 是無法讀取文件的，其核心就是通過 append()，將文件變成新增字段，來上傳文件；

FileReader 簡單的讀取文件例子

/*
  先在 html 里面準便好  標簽
*/

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)
}

解讀步驟

創建 FileReader 對象；

通過 fileInput 的 dom 對象 onchange 的方法，獲取原始 File 對象；

通過 FileReader 中其中一種讀取方式，讀取原始 File 對象；

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

GPU云服務器云服務器 ajax上傳文件 ajax文件上傳 ajax實現文件上傳 Ajax文件上傳庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107928.html

H5特性之FormData不刷新文件上傳

摘要：雜言之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網上搜各種庫，附帶多圖上傳，預覽，甚至是圖片處理等特技。但是是個好東西，他提供了，可以幫助我們拼湊參數，乃至文件資源。測試上傳可以看到請求到了看下，就可以看到返回的相關信息了。雜言 ??之前朋友說的不刷新上傳文件。最暴力的解決方案就是上網上搜各種JS庫，附帶多圖上傳，預覽，甚至是圖片處理等特技。那么如果不接觸第三方的庫，可不可以...

vincent_xyb 2019-08-21 10:34 評論0 收藏0
WEB之常見工作問題總結（1-20）

摘要：第三種，使用格式，即在中請求參數處理跨域問題當然請求方式只能是。最后發現有網友說版本不穩定引起的，于是把百度地圖回退到了，結果還真是可以了。請問在移動端頁面中播放優酷里面的視頻，怎樣實現 1.web掃碼登錄怎么實現，思路步驟 WEB平臺手機第1步生成二維碼第2步（ajax監控后臺）掃碼第3步 ...

genedna 2019-08-22 13:40 評論0 收藏0
php圖片處理之本地圖片轉base64格式上傳

摘要：文章首發于藍鍋鍋博客主要是用到的接口，既然是的，所支持的瀏覽器我就不多說啦，老生常談的問題了，遠離，珍惜生命。目錄路徑為目錄路徑為文章首發于藍鍋鍋博客，歡迎交流，共同進步。我們在開發系統時，處理圖片上傳是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式，今天我們來講一個使用html5 base64上傳圖片的方法。文章首發于藍...

levy9527 2019-06-27 14:44 評論0 收藏0