Struts2实现文件上传并显示实时进度_JAVA_编程开发_程序员俱乐部

??????? 基于浏览器的文件上传，特别是对于通过<input type="file">标签来实现上传的情况， 存在着严重的性能问题，因为用户提交了文件之后，在浏览器把文件上传到服务器的过程中，界面看上去似乎是静止的，如果是小文件还好些，如果不幸需要上传的 是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种不堪的经历。

????? 我们为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。

　　现在我就针对这个问题给出一个解决方案，我们将实现一个具有监控能力的WEB上传的程序——它不仅把文件上传到服务器，而且"实时地"监视文件上传的实际过程。

解决方案的基本思路是这样的：

• 　　在Form提交上传文件同时，使用AJAX周期性地从Action轮询上传状态信息
• 　　然后，根据此信息更新进度条和相关文字，及时反映文件传输状态

?

实现一个文件监听类，实现对文件上传进度的实时监听，并将监听结果存放到session中，公前台界面读取。

class="java" name="code">/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.listener;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;

import com.wallet.myWallet.entity.State;

/**
 * 
 * 
 * @author zhouhua, 2014-7-16
 */
public class FileUploadListener implements ProgressListener {

    // 声明一个HttpSession，目的是把State对象放到这个HttpSession中
    private HttpSession session;

    // 此构造函数由MyJakartaMultiPartRequest.java类parseRequest()方法调用
    public FileUploadListener(HttpServletRequest request) {
        super();
        session = request.getSession();
    }

    public void update(long uploadByte, long fileSizeByte, int fileIndex) {
        if (fileSizeByte == -1) {
            // 如果上传的大小为-1则上传已经完成
            System.out.println("上传文件结束！");
        } else {
            if (session.getAttribute("uploadState") == null) {
                // 如果为空就new一个State对象并设置里面的文本内容
                State state = new State();
                state.setState(uploadByte, fileSizeByte, (fileIndex - 1));
                session.setAttribute("uploadState", state);
            } else {
                // 如果session中有uploadState对象就取出来，然后设置里面文本内容
                State state = (State) session.getAttribute("uploadState");
                state.setState(uploadByte, fileSizeByte, (fileIndex - 1));
            }
        }
    }

}

接下来是一个文件状态类：

/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.entity;

import java.text.NumberFormat;
import java.text.SimpleDateFormat;

/**
 * 
 * 
 * @author zhouhua, 2014-7-16
 */
public class State {

    private long uploadByte; // 已经上传的字节数，单位：字节
    private long fileSizeByte; // 所有文件的总长度，单位：字节
    private int fileIndex; // 正在上传第几个文件
    private long startTime; // 开始上传的时间，用于计算上传速度等
    private int percent; // 上传百分比
    private long speed;
    private long time; 
    private static final SimpleDateFormat SIMPLEFORMAT = new SimpleDateFormat("HH:mm:ss");

    public State() {
        startTime = System.currentTimeMillis();
        percent = 0;
        speed=0L;
    }

    // 从State状态类中取得状态的字符串，用字符串的形式拼成XML文件内容
    public synchronized String getStateString() {
        StringBuilder sb = new StringBuilder("<info>");
        sb.append("<uploadByte>" + NumberFormat.getInstance().format(uploadByte/(1024*1024))
 + "</uploadByte>");
   sb.append("<fileSizeByte>" + NumberFormat.getInstance().format(fileSizeByte/(1024*1024))
                + "</fileSizeByte>");
   sb.append("<speed>" + NumberFormat.getInstance().format((speed/(1024*1024))/time)
    + "</speed>");
        sb.append("<fileIndex>" + fileIndex + "</fileIndex>");
        sb.append("<percent>" + percent + "</percent>");
        sb.append("<startTime>" + SIMPLEFORMAT.format(startTime) + "</startTime>");
        sb.append("</info>");
        return sb.toString();
    }

    public synchronized void setState(long uploadByte, long fileSizeByte, int fileIndex) {
        this.uploadByte = uploadByte;
        this.fileSizeByte = fileSizeByte;
        this.fileIndex = fileIndex;
        this.speed=uploadByte-speed;
        this.time=(System.currentTimeMillis()-startTime)/1000;
        if ((Long.valueOf(uploadByte) * 100 / Long.valueOf(fileSizeByte) <= 100)) {
            // 生成当前上传进度的公式，加入判断条件的含义在于不需要重复计算
            percent = (int) (Long.valueOf(uploadByte) * 100 / Long.valueOf(fileSizeByte));
        }
    }
}

如果想通过Struts2监听文件上传的进度，我们需要自己实现Struts2的MultiPartRequest类并将自己的文件上传监听类注入，实现类如下：

/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.listener;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.RequestContext;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.struts2.StrutsConstants;
import org.apache.struts2.dispatcher.multipart.MultiPartRequest;

import com.opensymphony.xwork2.LocaleProvider;
import com.opensymphony.xwork2.inject.Inject;
import com.opensymphony.xwork2.util.LocalizedTextUtil;
import com.opensymphony.xwork2.util.logging.Logger;
import com.opensymphony.xwork2.util.logging.LoggerFactory;

/**
 * 
 * 
 * @author zhouhua, 2014-7-16
 */
public class MyJakartaMultiPartRequest implements MultiPartRequest {

    static final Logger LOG = LoggerFactory.getLogger(MyJakartaMultiPartRequest.class);
    // maps parameter name -> List of FileItem objects
    protected Map<String, List<FileItem>> files = new HashMap<String, List<FileItem>>();
    // maps parameter name -> List of param values
    protected Map<String, List<String>> params = new HashMap<String, List<String>>();
    // any errors while processing this request
    protected List<String> errors = new ArrayList<String>();
    protected long maxSize;
    private Locale defaultLocale = Locale.ENGLISH;

    @Inject(StrutsConstants.STRUTS_MULTIPART_MAXSIZE)
    public void setMaxSize(String maxSize) {
        this.maxSize = Long.parseLong(maxSize);
    }

    @Inject
    public void setLocaleProvider(LocaleProvider provider) {
        defaultLocale = provider.getLocale();
    }

    /**
     * Creates a new request wrapper to handle multi-part data using methods adapted
     * from Jason
     * Pell's multipart classes (see class description).
     * 
     * @param saveDir the directory to save off the file
     * @param request the request containing the multipart
     * @throws java.io.IOException is thrown if encoding fails.
     */
    public void parse(HttpServletRequest request, String saveDir) throws IOException {
        try {
            setLocale(request);
            processUpload(request, saveDir);
        } catch (FileUploadBase.SizeLimitExceededException e) {
            if (LOG.isWarnEnabled()) {
                LOG.warn("Request exceeded size limit!", e);
            }
            String errorMessage = buildErrorMessage(e,
                    new Object[] { e.getPermittedSize(), e.getActualSize() });
            if (!errors.contains(errorMessage)) {
                errors.add(errorMessage);
            }
        } catch (Exception e) {
            if (LOG.isWarnEnabled()) {
                LOG.warn("Unable to parse request", e);
            }
            String errorMessage = buildErrorMessage(e, new Object[] {});
            if (!errors.contains(errorMessage)) {
                errors.add(errorMessage);
            }
        }
    }

    protected void setLocale(HttpServletRequest request) {
        if (defaultLocale == null) {
            defaultLocale = request.getLocale();
        }
    }

    protected String buildErrorMessage(Throwable e, Object[] args) {
        String errorKey = "struts.messages.upload.error." + e.getClass().getSimpleName();
        if (LOG.isDebugEnabled()) {
            LOG.debug("Preparing error message for key: [#0]", errorKey);
        }
        return LocalizedTextUtil.findText(this.getClass(), errorKey, defaultLocale,
         e.getMessage(),args);
    }

    private void processUpload(HttpServletRequest request, String saveDir)
        throws FileUploadException, UnsupportedEncodingException {
        for (FileItem item : parseRequest(request, saveDir)) {
            if (LOG.isDebugEnabled()) {
                LOG.debug("Found item " + item.getFieldName());
            }
            if (item.isFormField()) {
                processNormalFormField(item, request.getCharacterEncoding());
            } else {
                processFileField(item);
            }
        }
    }

    private void processFileField(FileItem item) {
        if (LOG.isDebugEnabled()) {
            LOG.debug("Item is a file upload");
        }
        // Skip file uploads that don't have a file name - meaning that no file was selected.
        if (item.getName() == null || item.getName().trim().length() < 1) {
            LOG.debug("No file has been uploaded for the field: " + item.getFieldName());
            return;
        }
        List<FileItem> values;
        if (files.get(item.getFieldName()) != null) {
            values = files.get(item.getFieldName());
        } else {
            values = new ArrayList<FileItem>();
        }
        values.add(item);
        files.put(item.getFieldName(), values);
    }

    private void processNormalFormField(FileItem item, String charset)
        throws UnsupportedEncodingException {
        if (LOG.isDebugEnabled()) {
            LOG.debug("Item is a normal form field");
        }
        List<String> values;
        if (params.get(item.getFieldName()) != null) {
            values = params.get(item.getFieldName());
        } else {
            values = new ArrayList<String>();
        }
        // note: see http://jira.opensymphony.com/browse/WW-633
        // basically, in some cases the charset may be null, so
        // we're just going to try to "other" method (no idea if this
        // will work)
        if (charset != null) {
            values.add(item.getString(charset));
        } else {
            values.add(item.getString());
        }
        params.put(item.getFieldName(), values);
        item.delete();
    }

private List<FileItem> parseRequest(HttpServletRequest servletRequest, String saveDir)
        throws FileUploadException {
        DiskFileItemFactory fac = createDiskFileItemFactory(saveDir);
        ServletFileUpload upload = new ServletFileUpload(fac);
        // 设置上传进度的监听
        upload.setProgressListener(new FileUploadListener(servletRequest));
        upload.setSizeMax(maxSize);
        return upload.parseRequest(createRequestContext(servletRequest));
    }

    private DiskFileItemFactory createDiskFileItemFactory(String saveDir) {
        DiskFileItemFactory fac = new DiskFileItemFactory();
        // Make sure that the data is written to file
        fac.setSizeThreshold(0);
        if (saveDir != null) {
            fac.setRepository(new File(saveDir));
        }
        return fac;
    }

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.dispatcher.multipart.MultiPartRequest#getFileParameterNames()
     */
    public Enumeration<String> getFileParameterNames() {
        return Collections.enumeration(files.keySet());
    }

    /*
     * (non-Javadoc)
     * 
     * @see
     * 
     */
    public String[] getContentType(String fieldName) {
        List<FileItem> items = files.get(fieldName);
        if (items == null) {
            return null;
        }
        List<String> contentTypes = new ArrayList<String>(items.size());
        for (FileItem fileItem : items) {
            contentTypes.add(fileItem.getContentType());
        }
        return contentTypes.toArray(new String[contentTypes.size()]);
    }

    /*
     * (non-Javadoc)
     * 
     * 
     */
    public File[] getFile(String fieldName) {
        List<FileItem> items = files.get(fieldName);
        if (items == null) {
            return null;
        }
        List<File> fileList = new ArrayList<File>(items.size());
        for (FileItem fileItem : items) {
            File storeLocation = ((DiskFileItem) fileItem).getStoreLocation();
            if (fileItem.isInMemory() && storeLocation != null && !storeLocation.exists()) {
                try {
                    storeLocation.createNewFile();
                } catch (IOException e) {
                    if (LOG.isErrorEnabled()) {
                        LOG.error(
                                "Cannot write uploaded empty file to disk: "
                                        + storeLocation.getAbsolutePath(), e);
                    }
                }
            }
            fileList.add(storeLocation);
        }
        return fileList.toArray(new File[fileList.size()]);
    }


    public String[] getFileNames(String fieldName) {
        List<FileItem> items = files.get(fieldName);
        if (items == null) {
            return null;
        }
        List<String> fileNames = new ArrayList<String>(items.size());
        for (FileItem fileItem : items) {
            fileNames.add(getCanonicalName(fileItem.getName()));
        }
        return fileNames.toArray(new String[fileNames.size()]);
    }


    public String[] getFilesystemName(String fieldName) {
        List<FileItem> items = files.get(fieldName);
        if (items == null) {
            return null;
        }
        List<String> fileNames = new ArrayList<String>(items.size());
        for (FileItem fileItem : items) {
            fileNames.add(((DiskFileItem) fileItem).getStoreLocation().getName());
        }
        return fileNames.toArray(new String[fileNames.size()]);
    }


    public String getParameter(String name) {
        List<String> v = params.get(name);
        if (v != null && v.size() > 0) {
            return v.get(0);
        }
        return null;
    }

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.dispatcher.multipart.MultiPartRequest#getParameterNames()
     */
    public Enumeration<String> getParameterNames() {
        return Collections.enumeration(params.keySet());
    }


    public String[] getParameterValues(String name) {
        List<String> v = params.get(name);
        if (v != null && v.size() > 0) {
            return v.toArray(new String[v.size()]);
        }
        return null;
    }

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.dispatcher.multipart.MultiPartRequest#getErrors()
     */
    public List<String> getErrors() {
        return errors;
    }

    /**
     * Returns the canonical name of the given file.
     * 
     * @param filename the given file
     * @return the canonical name of the given file
     */
    private String getCanonicalName(String filename) {
        int forwardSlash = filename.lastIndexOf("/");
        int backwardSlash = filename.lastIndexOf("\\");
        if (forwardSlash != -1 && forwardSlash > backwardSlash) {
            filename = filename.substring(forwardSlash + 1, filename.length());
        } else if (backwardSlash != -1 && backwardSlash >= forwardSlash) {
            filename = filename.substring(backwardSlash + 1, filename.length());
        }
        return filename;
    }

    /**
     * Creates a RequestContext needed by Jakarta Commons Upload.
     * 
     * @param req the request.
     * @return a new request context.
     */
    private RequestContext createRequestContext(final HttpServletRequest req) {
        return new RequestContext() {
            public String getCharacterEncoding() {
                return req.getCharacterEncoding();
            }

            public String getContentType() {
                return req.getContentType();
            }

            public int getContentLength() {
                return req.getContentLength();
            }

            public InputStream getInputStream() throws IOException {
                InputStream in = req.getInputStream();
                if (in == null) {
                    throw new IOException("Missing content in the request");
                }
                return req.getInputStream();
            }
        };
    }

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.dispatcher.multipart.MultiPartRequest#cleanUp()
     */
    public void cleanUp() {
        Set<String> names = files.keySet();
        for (String name : names) {
            List<FileItem> items = files.get(name);
            for (FileItem item : items) {
                if (LOG.isDebugEnabled()) {
                    String msg = LocalizedTextUtil.findText(this.getClass(),
                       "struts.messages.removing.file", Locale.ENGLISH, "no.message.found",
                            new Object[] { name, item });
                    LOG.debug(msg);
                }
                if (!item.isInMemory()) {
                    item.delete();
                }
            }
        }
    }
}

自己的类实现MultiPartRequest后,需要在Struts.xml文件中进行装配：

	<!--demo12，struts2文件上传与下载 -->
	<bean type="org.apache.struts2.dispatcher.multipart.MultiPartRequest"
		name="parser" class="com.wallet.myWallet.listener.MyJakartaMultiPartRequest"
		scope="default" />

	<!--demo12，struts2文件上传与下载 -->
	<constant name="struts.multipart.parser" value="parser" />

前面的工作做完后就需要写两个Action，一个用于文件上传，另一个用于读取文件上传进度：

?

文件上传：

/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.wallet.core.action.BaseAction;
import com.wallet.myWallet.entity.DataImportStatus;
import com.wallet.myWallet.entity.FileUploadTools;

/**
 * 
 * 
 * @author zhouhua, 2014-7-15
 */
@Controller
@Scope("prototype")
public class FileUploadAction extends BaseAction<Object> {

    /**  */
    private static final long serialVersionUID = -2091410772080750644L;

    // 声明封装了File上传的FileUploadTools类的实例
    // FileUploadTools类也封装了上传的属性及get和set方法
    private FileUploadTools fileUploadTools = new FileUploadTools();

    private Map jsonMap = new HashMap();

    public Map getJsonMap() {
        return jsonMap;
    }

    public void setJsonMap(Map jsonMap) {
        this.jsonMap = jsonMap;
    }

    public FileUploadTools getFileUploadTools() {
        return fileUploadTools;
    }

    public void setFileUploadTools(FileUploadTools fileUploadTools) {
        this.fileUploadTools = fileUploadTools;
    }

    /**
     * 处理文件上传
     * 
     * @return
     * @throws IOException
     * @throws InterruptedException
     */
    public String upload() throws IOException, InterruptedException {
        // 文件上传
        fileUploadTools.beginUpload();
        getSession().setAttribute("uploadState", null);
        jsonMap.put("flg", true);
        return "upload";
    }

}

?

/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.entity;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;

/**
 * 
 * @author zhouhua, 2014-7-16
 */
public class FileUploadTools {

    private String username;
    private File uploadFile[];// 上传的文件是数组类型
    private String uploadFileFileName[];// 文件名是数组类型
    private String uploadFileContentType[];

    public String beginUpload() throws IOException {
        System.out.println("用户名：" + username);
        String targetDirectory = "C:/demo_upload/";
        if (uploadFile != null && uploadFile.length > 0) {
            for (int i = 0; i < uploadFile.length; i++) {
                File target = new File(targetDirectory, uploadFileFileName[i]);
                FileUtils.copyFile(uploadFile[i], target);
            }
        }
        return "success";
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public File[] getUploadFile() {
        return uploadFile;
    }

    public void setUploadFile(File[] uploadFile) {
        this.uploadFile = uploadFile;
    }

    public String[] getUploadFileFileName() {
        return uploadFileFileName;
    }

    public void setUploadFileFileName(String[] uploadFileFileName) {
        this.uploadFileFileName = uploadFileFileName;
    }

    public String[] getUploadFileContentType() {
        return uploadFileContentType;
    }

    public void setUploadFileContentType(String[] uploadFileContentType) {
        this.uploadFileContentType = uploadFileContentType;
    }

}

用于读取文件上传进度：

/*
 * Copyright (c) 2012-2032 Accounting Center of China Aviation(ACCA).
 * All Rights Reserved.
 */
package com.wallet.myWallet.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.wallet.core.action.BaseAction;
import com.wallet.myWallet.entity.State;

/**
 * 
 * 
 * @author zhouhua, 2014-7-16
 */
@Controller
@Scope("prototype")
public class StateAction extends BaseAction<Object> {

    /**  */
    private static final long serialVersionUID = 1L;

    public String execute() throws IOException {
        // 从session中取得名称为uploadState的State对象
        State tempState = (State) getSession().getAttribute("uploadState");
        if (tempState != null) {
            // 设置编码为utf-8
            ServletActionContext.getResponse().setCharacterEncoding("utf-8");
            // 设置响应的格式为XML
            ServletActionContext.getResponse().setContentType("text/xml");
            // 用out对象输出xml代码头
            ServletActionContext.getResponse().getWriter()
                    .print("<?xml version='1.0' encoding='" + "utf-8" + "' ?>");
            // 用out对象输出xml代码体
            ServletActionContext.getResponse().getWriter().print(tempState.getStateString());
        }
        return null;
    }
}

接下来就是jsp和js了：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<base href="<%=basePath%>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多文件上传，显示进度条实例</title>
<style type="text/css">
<!--
body,td,th {
	font-size: 9pt;
}
-->
</style>
<!--参考：http://api.jqueryui.com/progressbar/-->
<link rel="stylesheet"
	href="./js/jqueryUI/themes/base/jquery.ui.all.css">
<script src="./js/jquery-1.10.2.js"></script>
<script src="./js/jqueryUI/ui/jquery.ui.core.js"></script>
<script src="./js/jqueryUI/ui/jquery.ui.widget.js"></script>
<script src="./js/jqueryUI/ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="./css/demos.css">
<script src="./js/fileUpload.js"></script>
</head>
<body>
	<br />
	<form action="fileUploadAction!upload.action" method="post"
		enctype="multipart/form-data" onsubmit="return submitForm()">
		<table width="818" border="1">
			<tr>
				<td width="176">
					<div align="center">用户账号</div>
				</td>
				<td width="626"><input type="text"
					name="fileUploadTools.username" /></td>
			</tr>
			<tr>
				<td>
					<div align="center">
		             用户附件 <br /> <a href="javascript:insertFile()">添加附件</a>
					</div>
				</td>
				<td id="fileForm"><br /></td>
			</tr>
		</table>
		<input type="submit" value="开始上传..." />
		<form>
			<br />
			<div id="progressbar" style="width: 500"></div>
			<br />
			<div id="progressDetail" class="demo-description"
				>
			<p>进度详细信息显示于此......</p>
			</div>
</body>
</html>

文件上传的js：

?

// 下面这三个函数是生成与刷新进度条、进度详细信息的
// 初始化进度条
$(function() {
	$("#progressbar").progressbar({
		value : 0
	});
});
// 调用查询进度信息接口
function refreshProcessBar() {
	
	$.ajax({
		url:'stateAction.action',
		data:{'timestamp': new Date().getTime()},
		type:'get',
		dataType:'xml',
		success:function(data){
			var flg=refreshProcessBarCallBack(data)	
		}
	});

}


// 查询进度信息接口回调函数
function refreshProcessBarCallBack(returnXMLParam) {
	var returnXML = returnXMLParam;
	var percent = $(returnXML).find('percent').text()
	var showText = "完成：" + percent + "%";
	showText = showText + "\n已读取"
			+ $(returnXML).find('uploadByte').text()+"MB";
	showText = showText + "\n文件总大小："
			+ $(returnXML).find('fileSizeByte').text()+"MB";
	showText = showText + "\n上传速率："
	+ $(returnXML).find('speed').text()+"MB/S";
	showText = showText + "\n当前上传文件为第：" + $(returnXML).find('fileIndex').text()
			+ "个";
	showText = showText + "\n开始上传时间：" + $(returnXML).find('startTime').text();
	// 刷新进度详细信息
	$('#progressDetail').empty();
	$('#progressDetail').text(showText);
	// 刷新进度条
	$("#progressbar").progressbar("option", "value", parseInt(percent));
	setTimeout("refreshProcessBar()", 1000);
	if(percent==100){
		return true;
	}else{
		return false;
	}
}
// 下面这三个函数是控制添加、删除、修改附件的（允许增加、删除附件，只允许指定后缀的文件被选择等）
var a = 0;
function file_change() {
	// 当文本域中的值改变时触发此方法
	var postfix = this.value.substring(this.value.lastIndexOf(".") + 1)
			.toUpperCase();
	// 判断扩展是否合法
	if (postfix == "JPG" || postfix == "GIF" || postfix == "PNG"
			|| postfix == "BMP" || postfix == "RAR" || postfix == "ZIP"
			|| postfix == "TXT" || postfix == "GHO" || postfix == "PDF") {
	} else {
		// 如果不合法就删除相应的File表单及br标签
		alert("您上传的文件类型不被支持，本系统只支持JPG,GIF,PNG,BMP,RAR,ZIP,TXT文件！");
		var testtest = $(this).attr('id');
		testtest = '#' + testtest;
		var sub_file = $(testtest);
		var next_a_ele = sub_file.next();// 取得a标记
		var br1_ele = $(next_a_ele).next();// 取得回车
		var br2_ele = $(br1_ele).next();// 取得回车

		$(br2_ele).remove();// 删除回车
		$(br1_ele).remove();// 删除回车
		$(next_a_ele).remove();// 删除a标签
		$(sub_file).remove();
		// 删除文本域，因为上传的文件类型出错，要删除动态创建的File表单
		return;
	}
}
function remove_file() {// 删除File表单域的方法
// 删除表单
	var testtest = $(this).val();
	testtest = '#' + testtest;
	var sub_file = $(testtest);
	var next_a_ele = sub_file.next();// 取得a标记
	var br1_ele = $(next_a_ele).next();// 取得回车
	var br2_ele = $(br1_ele).next();// 取得回车

	$(br2_ele).remove();// 删除回车
	$(br1_ele).remove();// 删除回车
	$(next_a_ele).remove();// 删除a标签
	$(sub_file).remove();// 删除File标记
}
function f() {
	// 方法名为f的主要作用是不允许在File表单域中手动输入文件名，必须单击“浏览”按钮
	return false;
}
function insertFile() {
	// 新建File表单
	var file_array = document.getElementsByTagName("input");
	var is_null = false;
	// 循环遍历判断是否有某一个File表单域的值为空
	for ( var i = 0; i < file_array.length; i++) {
		if (file_array[i].type == "file"
				&& file_array[i].name.substring(0, 15) == "fileUploadTools") {
			if (file_array[i].value == "") {
				alert("某一附件为空不能继续添加");
				is_null = true;
				break;
			}
		}
	}
	if (is_null) {
		return;
	}
	a++;
	// 新建file表单的基本信息
	var new_File_element = $('<input>');
	new_File_element.attr('type', 'file');
	new_File_element.attr('id', 'uploadFile' + a);
	new_File_element.attr('name', 'fileUploadTools.uploadFile');
	new_File_element.attr('size', 55);
	new_File_element.keydown(f);
	new_File_element.change(file_change);
	$('#fileForm').append(new_File_element);
	// 新建删除附件的a标签的基本信息
	var new_a_element = $('<a>');
	new_a_element.html("删除附件");
	new_a_element.attr('id', "a_" + new_File_element.name);
	new_a_element.attr('name', "a_" + new_File_element.name);
	new_a_element.val($(new_File_element).attr('id'));
	new_a_element.attr('href', "#");
	new_a_element.click(remove_file);
	$('#fileForm').append(new_a_element);
	var new_br_element = $("<br>");
	$('#fileForm').append(new_br_element);
	var new_br_element = $("<br>");
	$('#fileForm').append(new_br_element);
}
// 提交表单，提交时触发刷新进度条函数
function submitForm() {
	setTimeout("refreshProcessBar()", 1000);
	return true;
}

?? Iteye的排版有问题，可能导致看的不是很清楚，如果此功能正是你需要的话，可以参看本人的CSDN博客：

http://blog.csdn.net/zhouhua0104/article/details/37922429