最近编程有一个需求:本页面上传文件后,弹出模态框,显示后端返回的内容。再根据模态框的指示做其他操作。
$.ajax()提交多次发现总是失败。
发现ajax是不能直接提交"multipart/form-data"类型的数据,需要用到jquery.form.js中的$.ajaxSubmit()方法。
插件下载地址: http://plugins.jquery.com/form/
你的模板XXX.html:
<script>
function file_upload(){
var thisForm = $("form[enctype='multipart/form-data']");
var options = {
url: xxx,
type: "post",
dataType: "json",
data: $(thisForm).serializeArray(),
success: function(data){
var content = JSON.stringify(data);
});
}
}
$(thisForm).ajaxSubmit(options);
$(thisForm).resetForm(); //表单重置
return false; //阻止默认行为
}
</script>
<form action="" method="post" enctype="multipart/form-data" role="form">
......此处省略几百字
<input type="button" οnclick="return file_upload();"/>
</form>
注意上面的“提交”按钮的type不要设为"submit",否则表单默认跳转action后的url,提交给action对应的处理函数处理。
当然,$("form[enctype='multipart/form-data']").submit({})方法也是不可用的。
onclick事件需要return ,否则也会有其默认行为。