网址:http://malsup.com/jquery/form/
jquery form插件是用于在页面使用ajax上传表单、文件,不刷新的功能,直接开始例子:
有两种方式: ajaxForm 和ajaxSubmit ,前者直接在文档加载完成之后绑定到form上即可,在页面提交的时候会自动触发里面的处理,后者表示手动调用插件的ajax提交时机,可以在form提交的时候触发ajaxSubmit,也可以在一个button的click事件里面触发ajaxSubmit
先使用ajaxSubmit:
页面:
<%@ 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>
或者:
<%@ 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配置:
<!-- 处理文件上传 --> <action name="uploadFile" class="uploadFileAction" method="uploadFile"> </action>
后台Action:
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。