jquery form插件是用于在页面使用ajax上传表单、文件，不刷新

来源：互联网发布：wnba数据编辑：程序博客网时间：2024/06/06 21:45

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。

0 0