最近有遇到一个问题：
就是当需要上传文件时，不跳转其他页面，需要在文件保存完成，触发事件
一开始使用<form>的target属性跳转到本页面中的<iframe>，这样虽然可以解决页面不跳转问题，但是还是无法解决触发文件保存完成后的触发事件
上网寻找了一些解决方法，发现ajaxForm表单提交可以很好的解决这个问题
首先你得去下载jquery.form.js
javaScript,对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>