成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于 FormData

shuibo / 2624人閱讀

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

介紹

先看看 MDN 對(duì)FormData的介紹:

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

特點(diǎn)就是，增加了ajax對(duì)二進(jìn)制文件上傳的支持。比如：

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

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

請(qǐng)求頭部

可以看到 Content-Type 為:

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

圖中沒有看到 file 的二進(jìn)制文件

請(qǐng)求主體


每個(gè)參數(shù)包括：

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

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

第三行，指明content-type

第三行或第四行，空行

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

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


    username
兼容性

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

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

動(dòng)手實(shí)現(xiàn)了一個(gè)：https://github.com/henryluki/...

參考

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81194.html

相關(guān)文章

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

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

    developerworks 評(píng)論0 收藏0

  • 文件上傳進(jìn)度提示

    摘要：需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。 需求 當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。而要在上傳過程實(shí)時(shí)顯示上傳進(jìn)度，則需要已上傳的大小和文件總大小。 前提 請(qǐng)求是異步的。因?yàn)橐獙?shí)時(shí)獲取到上傳的進(jìn)度...

    MageekChiu 評(píng)論0 收藏0

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

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

    Cristalven 評(píng)論0 收藏0

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

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

    liaorio 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<