终于找到jquery ajxa请求传图片时为什么总是失败的原因了！

最新推荐文章于 2023-07-14 10:43:35 发布

周二也被占用

最新推荐文章于 2023-07-14 10:43:35 发布

阅读量901

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/u011350541/article/details/78397743

版权

Javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

开宗明义，很关键的一个配置processdata：

它会调用返回值:StringjQuery.param把{ width:1680, height:1050 }参数对象序列化为width=1680&height=1050这样的字符串。
如果你要发送的是个xmlDocument，当然就不希望能这么发送了，必须得设置processData=false，且以POST方式发送才行。

之前在设置ajxa请求时都没有习惯去设置下面这些参数：

async: false,  
cache: false,  
contentType: false,  
processData: false,

而processData就是和传文件有关的参数，不设置每次ajax请求都到不了后台直接前台报错。

最后附上成功请求的代码：

$.ajax({
          type: 'POST',
          url: 'uploadFile',
          data: formData,
          dateType:'JSON',
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,
          success: function(result){
              console.info("upload success"+result.result);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
              console.info(XMLHttpRequest.status);
              console.info(XMLHttpRequest.readyState);
              console.info(textStatus);
          },
          complete: function(XMLHttpRequest, textStatus) {
              this; // 调用本次AJAX请求时传递的options参数
          }
        });

补充必须设置contentType 为false：

这就是因为当我们在 form 标签中设置了enctype = “multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

需要结合这篇文章做深入理解：
https://segmentfault.com/a/1190000007207128
http://www.w3school.com.cn/jquery/ajax_ajax.asp

睡前再补充：

细心很重要，读者自行脑补这个ajax和上一个的区别把：

$.ajax({
          type: 'POST',
          url: 'uploadFile',
          data: formData,
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,
          dataType:'json',
          success: function(result){
              console.info("upload success"+result.result);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
              console.info(XMLHttpRequest.status);
              console.info(XMLHttpRequest.readyState);
              console.info(textStatus);
          },
          complete: function(XMLHttpRequest, textStatus) {
              this; // 调用本次AJAX请求时传递的options参数
          }
        });