jquery.form 上传文件，且完成后页面不跳转

最新推荐文章于 2022-08-21 01:24:21 发布

阿拉神油灯

最新推荐文章于 2022-08-21 01:24:21 发布

阅读量4.7k

点赞数 3

分类专栏： jquery 文章标签： jquery form 上传文件不跳转

本文链接：https://blog.csdn.net/u013125146/article/details/38703613

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文主要是为了记下上传文件后，页面不跳转的个人成功经验。网上很多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;
});

阿拉神油灯

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.form 上传文件，且完成后页面不跳转

本文主要是为了记下上传文件后，页面不跳转的个人
复制链接

扫一扫

专栏目录

jquery.form 上传文件，且完成后页面不跳转

“相关推荐”对你有帮助么？