關于 FormData

shuibo 發布于2019-08-20 13:42 / 2619人閱讀

摘要：分析一下請求信息，發現這種提交方式與表單提交是一樣的，比如提交兼容性由圖可見，在移動端，對低版本的設備支持不夠友好。我們知道，在請求中，函數會自動生成請求頭和請求主體。在瀏覽器不支持的情況下，我們可以通過拼接請求，來達到目的。

介紹

先看看 MDN 對FormData的介紹:

XMLHttpRequest Level2添加了一個新的接口FormData. 利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.

特點就是，增加了ajax對二進制文件上傳的支持。比如：

var formData = new FormData();
formData.append("username", "sam");
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = "hey!"; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", url);
request.send(formData);

這個例子既有File，還有Blob 類型文件，利用FormData 能輕松的進行異步上傳。

請求頭部

可以看到 Content-Type 為:

multipart/form-data; boundary=----WebKitFormBoundary2KZkAN7R3gSDjBJz

圖中沒有看到 file 的二進制文件

請求主體

每個參數包括：

第一行，“分界線”，圖中chrome的分界線是：“——WebKitFormBoundary”加16位隨機Base64位編碼的字符串作為分隔邊界

第二行，內容配置，指明form-data,和name鍵名稱

第三行，指明content-type

第三行或第四行，空行

注意，整個body結束最后，多了一個分界線。

分析一下請求信息，發現這種提交方式與form表單提交是一樣的，比如：


    username

兼容性

由圖可見，FormData 在移動端，對低版本的 Android 設備支持不夠友好。

我們知道，在ajax請求中，send函數會自動生成請求頭和請求主體。所以，send(formData)瀏覽器會自動生成上圖中的請求。在瀏覽器不支持FormData的情況下，我們可以通過拼接multipart/form-data請求，來達到目的。

動手實現了一個：https://github.com/henryluki/...

參考

FormData
The Multipart Content-Type
XMLHttpRequest Standard
Returning Values from Forms: multipart/form-data

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

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

關于前端上傳文件全面基礎掃盲貼(三) ----- FormData

摘要：如果是傳入三個參數的方式，那么該值將是一個布爾值，文件，或者一個，如果不是，將被轉成一個字符串可選傳給服務器的文件名稱一個。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文...

developerworks 2019-08-26 10:30 評論0 收藏0
文件上傳進度提示

摘要：需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。而要在上傳過程實時顯示上傳進度，則需要已上傳的大小和文件總大小。前提請求是異步的。因為要實時獲取到上傳的進度...

MageekChiu 2019-08-20 15:17 評論0 收藏0
關于 FormData 對象數組傳值總結

摘要：關于對象數組傳值總結代碼提示已經存在于實體類中。提交數據數據獲取判斷控件類型以對象的形式向后臺傳數據在實體類中創建集合在集合中添加實例在中調用數據類型關于 FormData 對象數組傳值總結 jQuery Java Spring MVC jQuery 代碼提示： Ncr 已經存在于實體類中。 // 提交數據 $(#submit-btn).click(func...

Cristalven 2019-08-22 17:04 評論0 收藏0
關于 FormData 對象數組傳值總結

摘要：關于對象數組傳值總結代碼提示已經存在于實體類中。提交數據數據獲取判斷控件類型以對象的形式向后臺傳數據在實體類中創建集合在集合中添加實例在中調用數據類型關于 FormData 對象數組傳值總結 jQuery Java Spring MVC jQuery 代碼提示： Ncr 已經存在于實體類中。 // 提交數據 $(#submit-btn).click(func...

liaorio 2019-08-15 15:53 評論0 收藏0