黄兵的个人博客

contentType = false相关问题思考

最近需要将文件上传到服务器，但是服务器那边怎么也获取不到文件。

报如下错误：

Uncaught TypeError: Illegal invocation

参考了这篇文章：Jquery and HTML FormData returns “Uncaught TypeError: Illegal invocation”

之后修改了一下代码，文件终于获取到了。

具体代码如下：

function upload_file() {
    var formData = new FormData();
    formData.append("file", $('#ingredient_file')[0].files[0])
    // add assoc key values, this will be posts values
    $.ajax({
        type: $('#tab_1_2 form').attr("method"),
        url: $('#tab_1_2 form').attr("action"),
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data);
        }
    })
}

最主要的就是：contentType: false这句没有加上。

查了一下资料，终于把问题搞清楚了，具体记录如下：

在刚接触 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” 以及<input type = "file">.

当我们使用表单上传文件时，我们来查看他的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 协议的一些知识～～有意思>_<

看样子，在使用Jquery的ajax上传文件的时候，加上contentType = false是必须的。

还有一条是：processData = false，具体作用是：

参考资料：

浅谈contentType = false

jQuery ajax - ajax() 方法