本文主要是为了记下上传文件后,页面不跳转的个人成功经验。网上很多jquery上传的例子,自己拿过来尝试了很多,大部分还是跳转了。自己又不想弄什么iframe来控制。
最后,拿到jquery.form.js这个jquery插件,尝试了几个例子,终于达到目的了。
不多说,上代码。
1、html页面中引用了jquery基础库、jquery.form插件。其中download.js是自己的js代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/report/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/report/js/jquery-form.js"></script>
<script type="text/javascript" src="/report/html/download.js"></script>
<title>Insert title here</title>
</head>
<body>
<form id="myForm" action="/report/uploadTemplate.do" enctype="multipart/form-data" method="post">
Name: <input type="text" name="name" />
file: <input type="file" name="file"> <br/>
<input type="submit" value="Submit Comment" />
</form>
</body>
</html>
2、成功上传,且正常返回执行回调函数,且不发生跳转。js如下,其中必须返回false,防止页面表单再次提交(经自测,返回true时,表单确实提交了两次)。
$('#myForm').submit(function() {
$(this).ajaxSubmit(function(data) {
alert(data);
});
return false;
});
3、开始尝试这个api方法来提交后台时,也能上传成功,但是不管返回true或false,页面都跳转了。不知道是我的用法不对还是什么原因。时间关系,也没有深究,mark一下,有空再回来试试。
$("#myForm").ajaxSubmit(function(message) {
// 对于表单提交成功后处理,message显示
alert(message);
return false;
});