ajax异步刷新上传文件

jquery插件实现ajax异步上传文件

现在很多系统中都有着异步刷新上传的功能需求，甚至更是有业务需要支持续传，目前h5中有FormData函数实现文件异步提交，但现阶段还主要存在很多项目使用不了h5的这个函数，所以今天我以servlet为例实现一个异步上传功能，借用到的工具包为apache的commons-fileupload-1.3.2.jar，若使用其他框架则有其他的文件封装工具，如：struts中的FormFile对象、springmvc中MultipartFile对象都支持着对文件的封装及解析功能，而且都有着比较良好的封装。

废话不多说，以下是我的实现过程： 

jquery引入：

//在jsp的头部引入jquery文件和jquery.form文件，jquery.form为上传插件,切记不要将位置调换，否则无法正确加载js

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

接下来为script部分：

<script type="text/javascript">  
  	function doUpload(formId,commitUrl){
  		var fileName=$("#fileName").val();
  		if(fileName==''){
  			alert("请选择需要导入的文件！");
  			return false;
  		}
  		$("#"+formId).ajaxSubmit({
  			url:commitUrl,
  			type:"post",
  			contentType:"application/x-www-form-urlencorded;charset=utf-8",//防止乱码
  			dataType:"json",
  			success:function(data){
  				alert(data);
  			},
  			error:function(){
  				alert('上传文件出现错误，请检查格式是否正确，或联系技术人员');
  			}
  		});
    }
</script>

form表单部分：

<span style="white-space:pre">	</span><form action="/工程/asyc_upload" name="mainFrm" id="mainFrm" enctype="multipart/form-data" method="post">
		 <input type="file" name="fileName" id="fileName"/>
		 <input type="hidden" name="userName" id="userName" value="userName">
		 <input type="submit" name="submit" value="submit提交">
		 <input type="button" value="ajax提交" οnclick="doUpload('mainFrm','/工程/asyc_upload');">
<span style="white-space:pre">	</span></form>

以上部分为前端代码，主要是对form表单的提交，然后后台进行request接收及参数处理

以下为后台java部分

package com.unionpay.acp.demo;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class Asyc_upload extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1960824567575955421L;
	private String filePath;    // 文件存放目录  
    private String tempPath;    // 临时文件目录  
 
    // 初始化  
    public void init(ServletConfig config) throws ServletException{  
        super.init(config);  
        // 从配置文件中获得初始化参数  
        filePath = config.getInitParameter("filepath");  
        tempPath = config.getInitParameter("temppath");  
 
        ServletContext context = getServletContext();  
 
        filePath = context.getRealPath(filePath);  
        tempPath = context.getRealPath(tempPath);  
        System.out.println("文件存放目录、临时文件目录准备完毕 ...");  
    }
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		req.setCharacterEncoding("UTF-8");
        PrintWriter pw = resp.getWriter(); 
        try{
			DiskFileItemFactory diskFactory=new DiskFileItemFactory();
			 // threshold 极限、临界值，即硬盘缓存
	        diskFactory.setSizeThreshold(4 * 1024);  
	        // 设置临时问及目录 当文件尺寸大于setSizeThreshold方法设置的临界值时将文件以临时文件保存  
	        diskFactory.setRepository(new File(tempPath));  
	        //apache上传文件jar
	        ServletFileUpload upload = new ServletFileUpload(diskFactory);  
	        // 设置允许上传的最大文件大小 4M  
	        upload.setSizeMax(4 * 1024 * 1024);  
	        // 解析HTTP请求消息头  
	        List<FileItem> fileItems = upload.parseRequest(req); 
	        Iterator<FileItem> iter = fileItems.iterator();
	        while(iter.hasNext()) {  
	            FileItem item = (FileItem)iter.next();  
	            if(item.isFormField()){  
	                System.out.println("处理表单内容 ...");  
	                processFormField(item, pw);  
	            }else{  
	                System.out.println("处理上传的文件 ...");  
	                processUploadFile(item, pw);  
	            } 
	        }
        }catch (Exception e) {
        	e.printStackTrace();
		}
        pw.print("{}");
	}
	
	/**
	 * 处理表单内容
	 * @param item
	 * @param pw
	 * @throws Exception
	 */
    private void processFormField(FileItem item, PrintWriter pw)  
        throws Exception {  
        String name = item.getFieldName();  
        String value = item.getString();          
        System.out.println(name + " : " + value + "\r\n");  
    }  
    
    /**
     * 处理上传的文件  
     * @param item
     * @param pw
     * @throws Exception
     */
    private void processUploadFile(FileItem item, PrintWriter pw)  
        throws Exception  {  
        // 此时的文件名包含了完整的路径，得注意加工一下  
        String filename = item.getName();         
        System.out.println("完整的文件名：" + filename);  
        int index = filename.lastIndexOf("\\");  
        filename = filename.substring(index + 1, filename.length());  
        long fileSize = item.getSize();  
        if("".equals(filename) && fileSize == 0)  {             
            System.out.println("文件名为空 ...");  
            return;  
        }  
        File uploadFile = new File(filePath + "/" + filename);  
        item.write(uploadFile);  
        System.out.println(filename + " 文件保存完毕 ...");  
        System.out.println("文件大小为 ：" + fileSize + "\r\n");  
    } 
    
    
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}
}

web.xml中主要配置容器的映射及初始化参数

  <servlet>
    <servlet-name>asyc_upload</servlet-name>
    <servlet-class>com.unionpay.acp.demo.Asyc_upload</servlet-class>
    <strong><init-param></strong>
    <param-name>filepath</param-name>
    <param-value>uploadFile</param-value>
    <strong></init-param>
    <init-param></strong>
    <param-name>temppath</param-name>
    <param-value>temp</param-value>
    <strong></init-param></strong>
  </servlet>
  <servlet-mapping>
    <servlet-name>asyc_upload</servlet-name>
    <url-pattern>/asyc_upload</url-pattern>
  </servlet-mapping>

目录结构（resource部分），temp为临时文件存放处，uploadFile为上传文件存放目录

演示界面如下：（submit和ajax实现都成功）亲测

最后回顾下，主要部分为jsp界面提交部分，及dopost接受，如果能正确流化文件，则上传成功，可先使用submit提交，然后再测试ajax访问，开发查错会更快