摘要:起初,協議中沒有上傳文件方面的功能,直到為協議添加了這個功能。而我們在中設置為是為了避免對其操作,從而失去分界符,而使服務器不能正常解析文件。
在剛接觸 JQuery 中的 ajax 時,對其 contentType 并沒有很在意,只是知曉它是代表發送信息至服務器時內容編碼類型,通俗點說就是告訴服務器從瀏覽器提交過來的數據格式。
默認值為contentType = "application/x-www-form-urlencoded".在默認情況下,內容編碼類型滿足大多數情況。
在這里,我們主要談談contentType = false.
在使用ajax上傳文件時:
var formData = new FormData(); formData.append("headPic", $("#upfile")[0].files[0]); $.ajax({ url: "/web/headPic", type: "post", dataType: "json", cache: false, data:formData, processData: false, contentType: false, }) .done(function(data) { //上傳成功 if(data.status == true){ console.log("success"); }else{ console.log(data.errMsg); } }) .fail(function() { console.log("GG,failed"); }) .always(function() { console.log("complete"); });
在其中先封裝了一個 formData 對象,然后使用 post 方法將文件傳給服務器。
這里我們就要先說說在 http 中傳輸文件的問題。起初,http 協議中沒有上傳文件方面的功能,直到 rfc1867 為 http 協議添加了這個功能。當然在 rfc1867 中限定 form 的 method 必須為 POST , enctype = “multipart/form-data” 以及.
當我們使用表單上傳文件時,我們來查看他的Request headers:
發現在 multipart/form-data 后面有boundary以及一串字符,這是分界符,后面的一堆字符串是隨機生成的,目的是防止上傳文件中出現分界符導致服務器無法正確識別文件起始位置。說到這肯定就要說說這分界符有啥作用呢?
因為對于上傳文件,我們沒有在使用原有的 http 協議,所以 multipart/form-data 請求是基于 http 原有的請求方式 post 而來的.那么來說說這個全新的請求方式與 post 的區別
請求頭的不同,對于上傳文件的請求,contentType = multipart/form-data是必須的,而 post 則不是,畢竟 post 又不是只上傳文件~。
請求體不同。這里的不同也就是指前者在發送的每個字段內容之間必須要使用分界符來隔開,比如文件的內容和文本的內容就需要分隔開,不然服務器就沒有辦法正常的解析文件,而后者 post 當然就沒有分界符直接以 name = "value"的形似發送。
說到這,我們發現在 JQuery ajax() 方法中我們使contentType = false,這不是沖突了嗎?這當然沒有,因為當我們查看這時的 Request headers,會發現還是有分界符。這就是因為當我們在 form 標簽中設置了enctype = “multipart/form-data”,這樣請求中的 contentType 就會默認為 multipart/form-data 。而我們在 ajax 中 contentType 設置為 false 是為了避免 JQuery 對其操作,從而失去分界符,而使服務器不能正常解析文件。
說真的,起初我只是想查查為啥使用 ajax 上傳文件時要將 contentType = false,結果莫名其妙了解到了 http 協議的一些知識~~有意思>_<
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87980.html
摘要:是發送的必須是類型注意把設為,讓不要對做處理,如果不設置為,會把轉換為字符串。查看文件上傳的請求頭里,參數為請求參數之間的界限標識。也就是說防止覆蓋掉的。 1、data是FormData 發送的data必須是FormData類型 2、注意processData 把processData設為false,讓jquery不要對formData做處理,如果processData不設置為fals...
摘要:地址源碼依賴響應頭部工具包,基于包,對結果進行了緩存獲取完成的頭部獲取類型的默認擴展名獲取默認字符編碼 [github地址:https://github.com/ABCDdouyae...] cache-content-type(koa2源碼依賴) http響應頭部工具包, 基于mime-types包,對結果進行了緩存 const getType = require(cache-con...
摘要:地址源碼依賴響應頭部工具包,基于包,對結果進行了緩存獲取完成的頭部獲取類型的默認擴展名獲取默認字符編碼 [github地址:https://github.com/ABCDdouyae...] cache-content-type(koa2源碼依賴) http響應頭部工具包, 基于mime-types包,對結果進行了緩存 const getType = require(cache-con...
摘要:地址源碼依賴響應頭部工具包,基于包,對結果進行了緩存獲取完成的頭部獲取類型的默認擴展名獲取默認字符編碼 [github地址:https://github.com/ABCDdouyae...] cache-content-type(koa2源碼依賴) http響應頭部工具包, 基于mime-types包,對結果進行了緩存 const getType = require(cache-con...
閱讀 999·2019-08-30 15:55
閱讀 3440·2019-08-30 13:10
閱讀 1268·2019-08-29 18:45
閱讀 2347·2019-08-29 16:25
閱讀 2107·2019-08-29 15:13
閱讀 2421·2019-08-29 11:29
閱讀 551·2019-08-26 17:34
閱讀 1485·2019-08-26 13:57