jquery form插件学习

congweijing

2014-03-05

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。

form jquery form表单提交 ajaxsubmit