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

来源：互联网发布：淘宝创业成功故事编辑：程序博客网时间：2024/05/22 03:28

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

1 0