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

来源:互联网 发布:贝叶斯定理 知乎 编辑:程序博客网 时间:2024/04/27 22:24

开宗明义,很关键的一个配置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参数          }        });
阅读全文
0 0
原创粉丝点击