jquery form插件是用于在页面使用ajax上传表单、文件，不刷新
2014-03-14 17:00
696 查看
jquery form插件是用于在页面使用ajax上传表单、文件，不刷新的功能，直接开始例子：
有两种方式: ajaxForm 和ajaxSubmit ，前者直接在文档加载完成之后绑定到form上即可，在页面提交的时候会自动触发里面的处理，后者表示手动调用插件的ajax提交时机，可以在form提交的时候触发ajaxSubmit，也可以在一个button的click事件里面触发ajaxSubmit
先使用ajaxSubmit：
页面：
Html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'upload.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
*/
//在form提交的时候触发，这个触发的时机是自己控制的，例如也可以在一个button的click事件里面触发ajaxSubmit
$("#myForm").submit(function(){
$('#myForm').ajaxSubmit({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
//记得返回false，阻止页面的默认提交行为
return false;
});
});
/**
* 提交请求发出之前的处理
*/
function handleBeforeSubmit(){
console.info('提交请求发出之前的处理')
}
/**
* 上传成功后的处理
*/
function handleSuccess(){
console.info('上传成功后的处理')
alert('上传成功 !');
}
</script>
</head>
<body>
<form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">
<label for="myFile">选择文件：</label>
<input type="file" name="myFile" />
<input type="hidden" name="myfield" value="myvalue">
<input type="submit" value="上传"/>
</form>
</body>
</html>
或者：
Html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'upload.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
});
/**
* 提交请求发出之前的处理
*/
function handleBeforeSubmit(){
console.info('提交请求发出之前的处理')
}
/**
* 上传成功后的处理
*/
function handleSuccess(){
console.info('上传成功后的处理')
alert('上传成功 !');
}
</script>
</head>
<body>
<form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">
<label for="myFile">选择文件：</label>
<input type="file" name="myFile" />
<input type="hidden" name="myfield" value="myvalue">
<input type="submit" value="上传"/>
</form>
</body>
</html>
都是一样的效果，后台action（这里使用struts2）
struts.xml配置：
Xml代码
<!-- 处理文件上传 -->
<action name="uploadFile" class="uploadFileAction" method="uploadFile">
</action>
后台Action:
Java代码
package com.tch.test.template.web.action;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import java.io.IOException;
import com.opensymphony.xwork2.ActionSupport;
@Component("uploadFileAction")
@Scope("prototype")
public class UploadFile extends ActionSupport {
private static final long serialVersionUID = 1L;
private File myFile;
private String myFileContentType;
private String myFileFileName;
private String destPath;
private String myfield;
public void uploadFile() {
/* Copy file to a safe location */
destPath = "e:/";
try {
System.out.println("Src File name: " + myFile);
System.out.println("Dst File name: " + myFileFileName);
System.out.println("myfield : "+myfield);
File destFile = new File(destPath+myFileFileName);
FileUtils.copyFile(myFile, destFile);
} catch (IOException e) {
e.printStackTrace();
}
}
public File getMyFile() {
return myFile;
}
public void setMyFile(File myFile) {
this.myFile = myFile;
}
public String getMyFileContentType() {
return myFileContentType;
}
public void setMyFileContentType(String myFileContentType) {
this.myFileContentType = myFileContentType;
}
public String getMyFileFileName() {
return myFileFileName;
}
public void setMyFileFileName(String myFileFileName) {
this.myFileFileName = myFileFileName;
}
public String getMyfield() {
return myfield;
}
public void setMyfield(String myfield) {
this.myfield = myfield;
}
}
OK。
有两种方式: ajaxForm 和ajaxSubmit ，前者直接在文档加载完成之后绑定到form上即可，在页面提交的时候会自动触发里面的处理，后者表示手动调用插件的ajax提交时机，可以在form提交的时候触发ajaxSubmit，也可以在一个button的click事件里面触发ajaxSubmit
先使用ajaxSubmit：
页面：
Html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'upload.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
*/
//在form提交的时候触发，这个触发的时机是自己控制的，例如也可以在一个button的click事件里面触发ajaxSubmit
$("#myForm").submit(function(){
$('#myForm').ajaxSubmit({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
//记得返回false，阻止页面的默认提交行为
return false;
});
});
/**
* 提交请求发出之前的处理
*/
function handleBeforeSubmit(){
console.info('提交请求发出之前的处理')
}
/**
* 上传成功后的处理
*/
function handleSuccess(){
console.info('上传成功后的处理')
alert('上传成功 !');
}
</script>
</head>
<body>
<form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">
<label for="myFile">选择文件：</label>
<input type="file" name="myFile" />
<input type="hidden" name="myfield" value="myvalue">
<input type="submit" value="上传"/>
</form>
</body>
</html>
或者：
Html代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'upload.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath %>common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath %>common/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
beforeSubmit:handleBeforeSubmit,
success:handleSuccess
});
});
/**
* 提交请求发出之前的处理
*/
function handleBeforeSubmit(){
console.info('提交请求发出之前的处理')
}
/**
* 上传成功后的处理
*/
function handleSuccess(){
console.info('上传成功后的处理')
alert('上传成功 !');
}
</script>
</head>
<body>
<form action="upload/uploadFile.htm" method="post" enctype="multipart/form-data" id="myForm">
<label for="myFile">选择文件：</label>
<input type="file" name="myFile" />
<input type="hidden" name="myfield" value="myvalue">
<input type="submit" value="上传"/>
</form>
</body>
</html>
都是一样的效果，后台action（这里使用struts2）
struts.xml配置：
Xml代码
<!-- 处理文件上传 -->
<action name="uploadFile" class="uploadFileAction" method="uploadFile">
</action>
后台Action:
Java代码
package com.tch.test.template.web.action;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import java.io.IOException;
import com.opensymphony.xwork2.ActionSupport;
@Component("uploadFileAction")
@Scope("prototype")
public class UploadFile extends ActionSupport {
private static final long serialVersionUID = 1L;
private File myFile;
private String myFileContentType;
private String myFileFileName;
private String destPath;
private String myfield;
public void uploadFile() {
/* Copy file to a safe location */
destPath = "e:/";
try {
System.out.println("Src File name: " + myFile);
System.out.println("Dst File name: " + myFileFileName);
System.out.println("myfield : "+myfield);
File destFile = new File(destPath+myFileFileName);
FileUtils.copyFile(myFile, destFile);
} catch (IOException e) {
e.printStackTrace();
}
}
public File getMyFile() {
return myFile;
}
public void setMyFile(File myFile) {
this.myFile = myFile;
}
public String getMyFileContentType() {
return myFileContentType;
}
public void setMyFileContentType(String myFileContentType) {
this.myFileContentType = myFileContentType;
}
public String getMyFileFileName() {
return myFileFileName;
}
public void setMyFileFileName(String myFileFileName) {
this.myFileFileName = myFileFileName;
}
public String getMyfield() {
return myfield;
}
public void setMyfield(String myfield) {
this.myfield = myfield;
}
}
OK。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一段用于编辑页面表单并使用ajax提交与无刷新获取的js段落
- PHP Ajax,FormData收集表单数据(包括文件) 页面无刷新上传文件(提交表单)
- javascript发送表单文件，ajax异步，不刷新页面上传PDF文件，并写入数据库，得到异步数据，提示上传成功或失败
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用JQuery无刷新页面上传表单文件(Excel等)
- Ajax 无刷新上传文件插件 uploadify 的使用
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用ajax提交form表单，包括ajax文件上传
- jQuery不使用插件及swf实现无刷新文件上传
- 利用ajaxfileupload插件实现无刷新文件上传
- jQuery 文件上传插件ajaxFileUpload使用以及onchange问题
- 关于jquery.form.js插件的无刷新上传文件使用的问题
- jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传。
- 使用ajax提交form表单，包括ajax文件上传
- 使用ajax提交form表单，包括ajax文件上传
- 无刷新文件上传 ajax提交表单
- 使用ajax提交form表单，包括ajax文件上传
- 使用ajax提交form表单，包括ajax文件上传
- 无刷新文件上传之二：Jquery文件上传插件--ajaxfileupload
- Asp.net使用ajax无刷新上传文件（附源码）