ajax 表单上传文件

Posted xueT

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax 表单上传文件相关的知识,希望对你有一定的参考价值。

以往的ajax表单提交都是用 serialize(),但当有文件需要上传的时候这样就行不通。

需要用FormData 解决 ,表单也不需要加 enctype="multipart/form-data"

以下代码

html

<form id="form"><input type="file" name="file" /></form>

js 
// 别忘了加载jq
<script>
var form = $("#form"); 
var formData = new FormData(form);      // formData表单数据
$.ajax({
  url:"/",// 提交的页面
  type:"post",
  data: formData,
  dataType:"json",
  async : false,
  cache : false,
  processData: false,    //必须的
  contentType: false,    //必须的
  success:function(resData){
  },  
 error:function(){alert(error);}
})
</script>

 



后台数据正常接收就可以;


以上是关于ajax 表单上传文件的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 提交表单包括文件上传

AJAX上传文件和文本不起作用

JSF 2.2 - 文件上传不适用于 Ajax。表单的编码类型似乎不正确(仅通过 AJAX)

工作中如何使用ajax提交form表单,包括ajax文件上传

Ajax表单上传进度条

文件的上传(表单上传和ajax文件异步上传)