浅谈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 协议的一些知识~~有意思>_<

相关文章
相关标签/搜索