便是当须要上传文件时,不跳转其他页面,须要在文件保存完成,触发事宜

一开始利用<form>的target属性跳转到本页面中的<iframe>,这样虽然可以办理页面不跳转问题,但是还是无法办理触发文件保存完成后的触发事宜

上网探求了一些办理方法,创造ajaxForm表单提交可以很好的办理这个问题

jspajaxsubmit返回值处理ajaxForm表单提交触发还调函数 jQuery

首先你得去下载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>