成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于 FormData

shuibo / 2659人閱讀

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

介紹

先看看 MDN 對FormData的介紹:

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

特點就是，增加了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 的二進制文件

請求主體


每個參數(shù)包括：

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

第二行，內(nèi)容配置，指明form-data,和name鍵名稱

第三行，指明content-type

第三行或第四行，空行

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

分析一下請求信息，發(fā)現(xiàn)這種提交方式與form表單提交是一樣的，比如：


    username
兼容性

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

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

動手實現(xiàn)了一個：https://github.com/henryluki/...

參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81194.html

相關(guān)文章

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData

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

    developerworks 評論0 收藏0

  • 文件上傳進度提示

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

    MageekChiu 評論0 收藏0

  • 關(guān)于 FormData 對象數(shù)組傳值總結(jié)

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

    Cristalven 評論0 收藏0

  • 關(guān)于 FormData 對象數(shù)組傳值總結(jié)

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

    liaorio 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<