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

資訊專欄INFORMATION COLUMN

http不使用Form表單發(fā)送文件數(shù)據(jù)和非文件數(shù)據(jù)(上傳篇)

kidsamong / 1568人閱讀

摘要：在最后也要添加一個(gè)分界，不一樣的是在分界的前后各加了兩個(gè)表示數(shù)據(jù)發(fā)送完畢。至此上傳篇結(jié)束了

這里要說(shuō)一下，本篇我重點(diǎn)說(shuō)的是上傳，至于下載，查看對(duì)應(yīng)的下載篇

在原來(lái)，文件的上傳是使用form表單去提交，有的時(shí)候?yàn)榱松蟼魑募?，還要專門(mén)為上傳文件寫(xiě)一個(gè)form表單上傳文件，十分的麻煩，探索宇宙已經(jīng)很累了，哪有時(shí)間浪費(fèi)?。。_^

正式進(jìn)入主題

先看看怎么從html頁(yè)面中發(fā)送文件，回答是：使用 FormData

FormData使用h5新添加的一個(gè)對(duì)象，可以用來(lái)包裝要發(fā)送的數(shù)據(jù)，一個(gè)例子

如上所述，你就已經(jīng)發(fā)送了

{
    username:123456,
    password:67890,
    picture:文件數(shù)據(jù)(其實(shí)這里是將文件轉(zhuǎn)換為二進(jìn)制了)
}

我們可以看見(jiàn)使用FormData添加數(shù)據(jù)非常的簡(jiǎn)單，特別是解決了在上傳文件只能使用form表單的憋屈。
下面我要說(shuō)說(shuō)，使用FormData包裝好的數(shù)據(jù)怎么傳輸?shù)模蚁脒@是非常有必要的，特別是當(dāng)你在后端解析數(shù)據(jù)的時(shí)候，必須要知道傳給后臺(tái)的數(shù)據(jù)長(zhǎng)什么樣

使用FormData后，會(huì)將request的Content-Type設(shè)置為

“multipart/form-data;boundary=----"+一段隨機(jī)的字母;

上面的boundary正如字面的意思一樣，就是一個(gè)分界的意思，分開(kāi)每一個(gè)鍵值對(duì)數(shù)據(jù)，具體的數(shù)據(jù)格式為

--boundary(換行)
Content-Disposition:form-data;name=“數(shù)據(jù)的鍵”(換行)

(換行)
數(shù)據(jù)的值(“換行”)

注意每一個(gè)boundary的前面要加兩個(gè)“－”
對(duì)于文件的數(shù)據(jù)格式為:

—boundary(換行)
Content-Disposition:form-data;name=“數(shù)據(jù)的鍵”;filename=“文件名”(換行)


Content-Type:*/*(換行)


文件的二進(jìn)制編碼

用我們前面的例子，發(fā)送的數(shù)據(jù)為:

--boundary
Content-Disposition:form-data;name="username"


123456
--boundary
Content-Disposition:form-data;name="password"


67890
--boundary
Content-Disposition:form-data;name="picture";filename="上傳的文件名"


Content-Type:image/jpeg;
對(duì)圖片進(jìn)行二進(jìn)制編碼后的數(shù)據(jù)
--boundary--

上面的boundary是一個(gè)變量，可以是一串隨機(jī)數(shù),不過(guò)FormData默認(rèn)是四個(gè)"-"加一串隨機(jī)數(shù)。
在最后也要添加一個(gè)分界，不一樣的是在分界的前后各加了兩個(gè)"-",表示數(shù)據(jù)發(fā)送完畢。

至此上傳篇結(jié)束了

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

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

相關(guān)文章

  • http不使用Form表單發(fā)送文件數(shù)據(jù)和非文件數(shù)據(jù)(下載篇)

    摘要：本文主要在后端接收前端給的數(shù)據(jù)，前端的上傳篇，查看對(duì)應(yīng)的上傳篇如果你想馬上使用，那么你可以去中使用或者可以快速的解決你的問(wèn)題，這里不使用包，完成下載的功能首先需要知道傳過(guò)來(lái)的數(shù)據(jù)長(zhǎng)什么樣子，這個(gè)非常重要如果這里有疑問(wèn)，你可以查看對(duì)應(yīng)的上傳篇 本文主要在后端接收前端給的FormData數(shù)據(jù)，前端的上傳篇，查看對(duì)應(yīng)的上傳篇 如果你想馬上使用，那么你可以去npm中使用multer或者form...

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

  • JS基礎(chǔ)篇--JS之表單提交時(shí)編碼類型enctype詳解

    摘要：格式支持比鍵值對(duì)復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點(diǎn)也很有用。例如下面這段代碼最終發(fā)送的請(qǐng)求是這種方案，可以方便的提交復(fù)雜的結(jié)構(gòu)化數(shù)據(jù)，特別適合的接口。 簡(jiǎn)介 form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認(rèn)為application/x-www-form-urlencoded。 ...

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

  • form表單那點(diǎn)事兒(下) 進(jìn)階篇

    摘要：在表單提交時(shí)，瀏覽器會(huì)自動(dòng)進(jìn)行一系列的校驗(yàn)工作，沒(méi)有通過(guò)校驗(yàn)的表單是無(wú)法提交到服務(wù)器的。而方法提交表單，會(huì)在請(qǐng)求中發(fā)送表單字段鍵值對(duì)。表單提交事件表單提交到服務(wù)器時(shí)，會(huì)觸發(fā)事件。 上一篇主要溫習(xí)了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會(huì)有取值賦值操作，比如有以下表單： ...

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

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

    摘要：表單用于向服務(wù)器傳輸數(shù)據(jù)。屬性對(duì)象的屬性指定了一個(gè)事件句柄函數(shù)。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。詳情查閱請(qǐng)狠狠地點(diǎn)擊關(guān)于對(duì)象代表表單中的一個(gè)提交按鈕在表單提交之前，觸發(fā)事件句柄，并且一個(gè)句柄可以通過(guò)返回來(lái)取消表單提交。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) -...

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

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

0條評(píng)論

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