Struts2实现文件上传并显示实时进度
基于浏览器的文件上传,特别是对于通过<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
已有 0 人发表留言,猛击->> 这里<<-参与讨论
ITeye推荐