日期:2014-05-16  浏览次数:20704 次

ajax 文件上传进度条

一:方案分析

?

? ?? 基于浏览器的文件上传,为了有更好的用户体验,我们一般就设置一个旋转的图标,旋转的图标无法实时的监控文件上传情况。所以我们将实现一个如何实时的监控文件的上传。

?

参考资料:http://www.cnblogs.com/ybase/archive/2011/11/15/2249298.html?

?

技术问题分析:

  • 如何实现上传的功能
  • 如何实现上传文件的监听功能
  • 如何实现记录上传状态的功能
  • 客户端如何状态的实时显示

解决方案:

??

  • 如何实现上传的功能? ------使用apache的FileUpload组件上传文件
  • 如何实现上传文件的监听功能 ------使用ProgressListener监听文件状态
  • 如何实现记录上传状态的功能 ------使用session保存文件的状态
  • 客户端如何状态的实时显示 -------客户端使用AJAX来查询上传的状态

?

基本思路:

?

客户端:界面的提交的时候使用<iframe 来实现模拟的无刷新提交,然后在使用ajax来周期的访问servlet并返回sesson中最新的状态信息。

?

服务器端:在servlet介绍到请求的时候,区分请求的类型是上传的请求还是ajax询问的请求,如果是上传的请求,则执行上传的方法,并启动监听保存上传状态到session中。

?

?

?

?

?

?在介绍源代码之前,我们先来看看程序运行界面:

?

接下来是源文件的目录结构:

?


?


?二、实现代码

?

UploadFileProgressBar.java ------使用apache的FileUpload组件上传文件

package com.yangpan.upload.progressbar;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
 * 有进度条的上传
 * 
 * @author 妞见妞爱
 *
 */
public class UploadFileProgressBar extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	//定义允许上传的文件扩展名
	protected HashMap<String, String> extMap = new HashMap<String, String>();
	//最大文件大小 100 M  --测试用
	protected long  maxSize = 100 * 1024 * 1024;
	//上传文件的保存路径
	protected String configPath = "attached/";

	protected String dirTemp = "attached/temp/";
	
	protected String dirName = "file";
	
	public void init() throws ServletException {
		
		//定义允许上传的文件扩展名
		//extMap.put("image", "gif,jpg,jpeg,png,bmp");
		//extMap.put("flash", "swf,flv");
		//extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
		extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar"); 
		
		
		
	}

	
	/**
	 * 处理上传文件
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 */
	@SuppressWarnings("unchecked")
	public void processFileUpload(HttpServletRequest request, PrintWriter out)
		throws ServletException, IOException {
	 
		//文件保存目录路径
		String savePath = this.getServletContext().getRealPath("/") + configPath;
		
		// 临时文件目录 
		String tempPath = this.getServletContext().getRealPath("/") + dirTemp;
		
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
		String ymd = sdf.format(new Date());
		savePath += "/" + ymd + "/";
		//创建文件夹
		File dirFile = new File(savePath);
		if (!dirFile.exists()) {
			dirFile.mkdirs();
		}
		
		tempPath += "/" + ymd + "/";
		//创建临时文件夹
		File dirTempFile = new File(tempPath);
		if (!dirTempFile.exists()) {
			dirTempFile.mkdirs();
		}
		
		D