淺談contentType = false

在剛接觸 JQuery 中的 ajax 時,對其 contentType 並無很在乎,只是知曉它是表明發送信息至服務器時內容編碼類型,通俗點說就是告訴服務器從瀏覽器提交過來的數據格式。web

默認值爲contentType = "application/x-www-form-urlencoded".在默認狀況下,內容編碼類型知足大多數狀況。
在這裏,咱們主要談談contentType = false.
在使用ajax上傳文件時: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 方法將文件傳給服務器。json

這裏咱們就要先說說在 http 中傳輸文件的問題。起初,http 協議中沒有上傳文件方面的功能,直到 rfc1867 爲 http 協議添加了這個功能。固然在 rfc1867 中限定 form 的 method 必須爲 POST , enctype = 「multipart/form-data」 以及<input type = "file">.瀏覽器

當咱們使用表單上傳文件時,咱們來查看他的Request headers:
圖片描述服務器

發如今 multipart/form-data 後面有boundary以及一串字符,這是分界符,後面的一堆字符串是隨機生成的,目的是防止上傳文件中出現分界符致使服務器沒法正確識別文件起始位置。說到這確定就要說說這分界符有啥做用呢?app

由於對於上傳文件,咱們沒有在使用原有的 http 協議,因此 multipart/form-data 請求是基於 http 原有的請求方式 post 而來的.那麼來講說這個全新的請求方式與 post 的區別post

  1. 請求頭的不一樣,對於上傳文件的請求,contentType = multipart/form-data是必須的,而 post 則不是,畢竟 post 又不是隻上傳文件~。編碼

  2. 請求體不一樣。這裏的不一樣也就是指前者在發送的每一個字段內容之間必需要使用分界符來隔開,好比文件的內容和文本的內容就須要分隔開,否則服務器就沒有辦法正常的解析文件,然後者 post 固然就沒有分界符直接以 name = "value"的形似發送。url

說到這,咱們發如今 JQuery ajax() 方法中咱們使contentType = false,這不是衝突了嗎?這固然沒有,由於當咱們查看這時的 Request headers,會發現仍是有分界符。這就是由於當咱們在 form 標籤中設置了enctype = 「multipart/form-data」,這樣請求中的 contentType 就會默認爲 multipart/form-data 。而咱們在 ajax 中 contentType 設置爲 false 是爲了不 JQuery 對其操做,從而失去分界符,而使服務器不能正常解析文件。spa

說真的,起初我只是想查查爲啥使用 ajax 上傳文件時要將 contentType = false,結果莫名其妙瞭解到了 http 協議的一些知識~~有意思>_<

相關文章
相關標籤/搜索