基于浏览器的文件上传，特别是对于通过<input type="file">标签来实现上传的情况， 存在着严重的性能问题，因为用户提交了文件之后，在浏览器把文件上传到服务器的过程中，界面看上去似乎是静止的，如果是小文件还好些，如果不幸需要上传的 是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种不堪的经历。
我们为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。
现在我就针对这个问题给出一个解决方案，我们将实现一个具有监控能力的WEB上传的程序——它不仅把文件上传到服务器，而且"实时地"监视文件上传的实际过程。
解决方案的基本思路是这样的：
- 在Form提交上传文件同时，使用AJAX周期性地从Action轮询上传状态信息
- 然后，根据此信息更新进度条和相关文字，及时反映文件传输状态
实现一个文件监听类，实现对文件上传进度的实时监听，并将监听结果存放到session中，公前台界面读取。
/*
* 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
相关推荐
在Java Struts2框架中实现文件上传进度条显示，主要涉及到的技术点包括Struts2的文件上传、Ajax异步通信以及前端进度条组件的使用。下面将详细讲解这些知识点。 首先，Struts2的文件上传功能是通过Struts2提供的`...
在Struts2中实现多文件上传并显示进度是常见的需求，尤其是在处理大文件或者批量上传时，用户需要实时了解上传进度以提升用户体验。在本案例中，我们将探讨如何在不依赖任何第三方插件的情况下实现这一功能。 首先...
在文件上传场景中，Struts2可以处理上传的文件，将其保存到服务器，并返回相应的响应。 **三、SWFUpload与Struts2整合步骤** 1. **添加依赖**：首先，需要在项目中引入SWFUpload的JavaScript库和Flash对象，以及...
总的来说，Struts2实现文件上传进度条显示需要整合服务器端的进度回调和客户端的进度更新，确保数据的实时同步。同时，为了提高用户体验，应考虑优化大文件上传的性能，如分块上传、断点续传等技术。通过以上步骤，...
总的来说，Struts2实现文件上传显示进度条效果需要理解文件上传的处理流程，创建一个监听器来捕获上传进度，并通过合适的通信机制将这些信息传递到前端进行显示。这是一个涉及到后端处理、前端交互以及网络通信的...
对于150MB的文件限制，开发者需要确保服务器有足够的内存和硬盘空间来处理大文件，并对文件上传进行适当的进度显示或超时处理。 总结起来，使用Struts实现文件上传下载涉及前端表单设计、后端处理逻辑、文件存储...
struts2文件上传实时显示实时上传进度 使用ajaxfileupload.js异步文件上传脚本上传文件，这样做可以防止页面跳转， 然后使用定时器发送异步请求实时更新上传进度 这里是原始参考连接 ...
在Struts2.0框架中实现文件上传进度是一项常见的需求，尤其在用户上传大文件时，实时显示上传进度可以提供更好的用户体验。本文将详细介绍如何利用Struts2.0的监听器来实现这一功能。 首先，我们需要理解文件上传的...
这样在其他页面中，只需要插入这个标签，就可以实现文件上传并显示进度条。 在实际应用中，这样的文件上传功能对于用户来说非常友好，因为它提供了实时的反馈，提高了用户体验。同时，SSH框架的使用确保了代码的...
Struts2文件上传进度条是Web开发中一个实用的功能，它允许用户在文件上传过程中查看当前的上传进度，提供更好的用户体验。在这个项目中，我们利用Struts2框架的拦截器机制来实现这一功能。 首先，我们需要理解...
在实际应用中，开发者需要确保Struts2的配置正确，Action类能正确处理文件，前端页面能正确触发上传并显示进度，同时服务器端有足够的存储空间来保存上传的文件。此外，安全性也是重要的考虑因素，例如限制文件类型...
在Struts2中实现文件上传功能，通常会涉及到处理大文件、用户体验优化等问题，如显示文件上传进度条。这个场景下，我们结合Ajax技术，可以创建一个实时反馈文件上传进度的动态界面，提升用户交互体验。 首先，我们...
这是根据uploadify3 2结合struts2搭建的文件上传环境 可以直接导入eclipse运行 每步实现基本都加了注释 以下是我碰到的问题： 1 判断session是否失效 本实例没测试这个问题 但在工作项目中碰到了 但原因在这里...
这通常通过JavaScript库如jQuery或现代的前端框架如React、Vue实现，将文件分批上传，并显示进度。 通过以上步骤，我们就完成了在Struts2框架下多文件上传的功能。在实际开发中，还需要考虑到安全性、性能优化等...
Action类通常会继承`org.apache.struts2.interceptor.FileUploadInterceptor`，并覆盖`execute()`方法以处理文件上传。例如： ```xml <param name="maximumSize">10485760</param> <!-- 设置最大上传文件大小 -...
Struts2 Uploadify是一个在Java Web开发中常用的插件，它结合了Struts2框架和Uploadify jQuery插件，能够实现文件的多选、上传进度显示以及后台处理等功能。这个项目示例提供了一个完整的解决方案，使得用户在上传多...
在本篇中，我们将深入探讨Struts2实现文件上传的原理、步骤以及需要注意的关键点。 首先，理解文件上传的基本流程： 1. 用户在表单中选择文件，并提交表单。 2. Struts2 框架接收到请求，解析请求体中的文件数据。...
在Struts2中，实现文件上传功能是非常常见的需求，而带进度条的文件上传则可以提供更好的用户体验，让用户了解文件上传的进度，减少用户的等待焦虑感。 Struts2的文件上传主要依赖于Apache的Commons FileUpload库。...
总结起来，"ext struts2 swfupload 跨域文件上传"是关于如何使用EXTJS构建前端界面，结合Struts2处理服务器端逻辑，利用SwfUpload的跨域能力实现文件上传的一种解决方案。这个过程中涉及的技术包括JavaScript编程、...