浅谈ajax上传文件属性contentType = false

柔光的暖阳◎ 2022-05-30 06:27 408阅读 0赞

# [浅谈contentType = false][contentType _ false] #

*  [javascript][] 
 *  [ajax][]

[fisecoco][] 2016年10月18日发布

*  赞  |   3收藏  |  12
 *  7k 次浏览

在刚接触 JQuery 中的 ajax 时，对其 contentType 并没有很在意，只是知晓它是代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。

默认值为`contentType = "application/x-www-form-urlencoded"`.在默认情况下，内容编码类型满足大多数情况。  
在这里，我们主要谈谈contentType = false.  
在使用ajax上传文件时：

在其中先封装了一个 formData 对象，然后使用 post 方法将文件传给服务器。

这里我们就要先说说在 http 中传输文件的问题。起初，http 协议中没有上传文件方面的功能，直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST ， `enctype = “multipart/form-data”` 以及`<input type = "file">`.

当我们使用表单上传文件时，我们来查看他的Request headers：  
![bVEoYA_w_1188_h_72][]

发现在 multipart/form-data 后面有boundary以及一串字符，这是分界符，后面的一堆字符串是随机生成的，目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。说到这肯定就要说说这分界符有啥作用呢？

因为对于上传文件，我们没有在使用原有的 http 协议，所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别

1.  请求头的不同，对于上传文件的请求，`contentType = multipart/form-data`是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。
2.  请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 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 协议的一些知识～～有意思>\_<

*  [2016年10月18日发布][contentType _ false]
 *

*  新浪微博
 *  微信
 *  Twitter
 *  Facebook

赞  |   3收藏  |  12

#### 你可能感兴趣的文章 ####

*  [ajax原理解析（一）][ajax 1] 43 收藏，4.4k 浏览
 *  [ajax提交表单小记][ajax 2] 1 收藏，356 浏览
 *  [节流事件][Link 1] 5 收藏，740 浏览

##  ##

2 条评论

默认排序 时间排序

[![1986391628-5805be5208caa_big64][]][1986391628-5805be5208caa_big64 1]

[风逝紫玄][1986391628-5805be5208caa_big64 1]  · 2017年04月10日

如果我传送的不是不是表单呢？那就没有form为我们设置的multipart/form-data，这时候我想自己设置jQueryajax的content-type;但是当我设置完后，运行时，报错：boundary not found  
请问这个怎么解决呢？(原生的可以，因为不需要我手动设置)

赞 回复

[![1705302713-5874fbd7ed519_big64][]][1705302713-5874fbd7ed519_big64 1]

[大桔子][1705302713-5874fbd7ed519_big64 1]  · 1月2日

试试这样

var data = new FormData();
    data.enctype="multipart/form-data";

`content-type` 依旧设置 false

[contentType _ false]: https://segmentfault.com/a/1190000007207128
[javascript]: https://segmentfault.com/t/javascript/blogs
[ajax]: https://segmentfault.com/t/ajax/blogs
[fisecoco]: https://segmentfault.com/u/fisecoco
[bVEoYA_w_1188_h_72]: /images/20220530/2a13655212d84f85a87efc03e2c3ede6.png
[ajax 1]: https://segmentfault.com/a/1190000000351328
[ajax 2]: https://segmentfault.com/a/1190000009460536
[Link 1]: https://segmentfault.com/a/1190000007421282
[1986391628-5805be5208caa_big64]: https://sfault-avatar.b0.upaiyun.com/198/639/1986391628-5805be5208caa_big64
[1986391628-5805be5208caa_big64 1]: https://segmentfault.com/u/purplemystic
[1705302713-5874fbd7ed519_big64]: https://sfault-avatar.b0.upaiyun.com/170/530/1705302713-5874fbd7ed519_big64
[1705302713-5874fbd7ed519_big64 1]: https://segmentfault.com/u/djz