亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

kidsamong / 1645人閱讀

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

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

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

正式進(jìn)入主題

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

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

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

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

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

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

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

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

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

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

注意每一個boundary的前面要加兩個“－”
對于文件的數(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;
對圖片進(jìn)行二進(jìn)制編碼后的數(shù)據(jù)
--boundary--

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50154.html

相關(guān)文章

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

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

    int64 評論0 收藏0

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

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

    ad6623 評論0 收藏0

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

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

    jerryloveemily 評論0 收藏0

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

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

    SnaiLiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<