便是当须要上传文件时,不跳转其他页面,须要在文件保存完成,触发事宜
一开始利用<form>的target属性跳转到本页面中的<iframe>,这样虽然可以办理页面不跳转问题,但是还是无法办理触发文件保存完成后的触发事宜
上网探求了一些办理方法,创造ajaxForm表单提交可以很好的办理这个问题
首先你得去下载jquery.form.jsjavaScript,对ajaxForm的一些初始化属性的设置
var options = {
target: ‘#output1’, //把做事器返回的内容放入id为output1的元素中
beforeSubmit: showRequest, //提交前的回调函数
success: showResponse, //提交后的回调函数
url: url, //默认是form的action,如果声明,则会覆盖
type: type, //默认是form的method,如果声明,则会覆盖
dataType: json , //接管做事端返回的类型
clearForm: true, //成功提交后,打消所有表单元素的值
resetForm: true, //成功提交后,重置所有表单元素的值
timeout: 3000 //限定要求的韶光,当要求大于3秒后,跳出要求
};
//这个便是调用ajaxForm提交的方法
$(“#表单名”).ajaxSubmit(options);
//回调函数
function showResponse(responseText, statusText, xhr, $form){
}
对付页面上的<form>不须要添加其他什么属性,授予id即可
附上测试用的html,比较直不雅观一点<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框(Modal)插件事宜</title>
<!-- <link href=\公众css/bootstrap.min.css\公众 rel=\"大众stylesheet\"大众> -->
<script src=\"大众js/jquery.min.js\"大众></script>
<script src=\公众js/test.js\"大众></script>
</head>
<body>
<form id=\"大众fileForm\"大众 >
<div ><input type=\公众file\"大众 name=\"大众test\"大众/></div>
</form>
<input type=\"大众button\公众 value=\"大众提交\"大众 onclick=\公众toSave()\"大众/>
<script>
$(function(){
var options = {
type: 'POST',
url: '../upload',
async:false,
success:showResponse,
dataType: 'json',
error : function(xhr, status, err) {
console.log(xhr);
console.log(status);
console.log(err);
alert(\"大众操作失落败\公众);
}
};
$(\公众#fileForm\"大众).submit(function(){
$(this).ajaxSubmit(options);
return false; //防止表单自动提交
});
});
/
保存操作
/
function toSave(){
$(\"大众#fileForm\"大众).submit();
console.log(\"大众aasda\公众);
}
/
保存后,实行回调
@param responseText
@param statusText
@param xhr
@param $form
/
function showResponse(responseText, statusText, xhr, $form){
console.log(\"大众花里胡哨\"大众);
if(responseText.status == \"大众0\"大众){
/
要求成功后的操作
/
alert(responseText.msg);
} else {
alert(responseText.msg);
}
}
</script>
</body>
</html>