未加星标

浅谈contentType = false

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

在刚接触 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:


浅谈contentType = false

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器浏览器数据求是冲突
分页:12
转载请注明
本文标题:浅谈contentType = false
本站链接:http://www.codesec.net/view/484702.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(25)