+-
这几天一直在整理一些以前的例子,并且优化了一下,也改写了一些swfupload 的源码,使其适应项目的开发。
1、 需要的 Servlet 类(上传用)和 jar 包:
下面有下载:CosUploaderServlet.rar
2、 Web.xml 配置:
<!-- COS大附件上传 限制 500M BEGIN --> <servlet> <servlet-name>CosUploader</servlet-name> <servlet-class>com.ebiz.lv.web.servlet.uploader.CosUploaderServlet</servlet-class> <init-param> <param-name>fileSizeLimit</param-name> <param-value>500</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>CosUploader</servlet-name> <url-pattern>/CosUploader.do</url-pattern> </servlet-mapping> <!-- COS大附件上传 限制 500M END -->
3、页面:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <%@ include file="../../commons/pages/taglibs.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>COS swfupload大附件上传</title> <link href="${ctx}/styles/style1.css" rel="stylesheet" type="text/css" /> <link href="${ctx}/commons/swfupload/style/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wyTitle">COS swfupload大附件上传</div> <div class="container"> <div class="mapWrap"> <br /> <html-el:form action="/Index.do"> <html-el:hidden property="method" value="save"/> <table width="100%" border="0" align="left" cellpadding="1" cellspacing="1" class="datagrid"> <tr> <td nowrap="nowrap" class="title_item">文档地址:</td> <td align="left"><table width="600" border="0" cellpadding="1" cellspacing="0"> <tr> <td width="14%"><span id="spanButtonPlaceHolder"></span><img title="添加小于100M的文件作为附件" alt="添加小于100M的文件作为附件" src="${ctx}/commons/swfupload/style/images/100M.jpg" /></td> <td><span id="btnCancel" onclick="swfu.cancelQueue();" style="font-family:Verdana;color:#005590; cursor:pointer;" >取消上传</span></td> </tr> <tr> <td colspan="2"><div class="" id="divCreateElementsToForm"></div></td> </tr> <tr> <td colspan="2"><div class="" id="fsUploadProgress"></div></td> </tr> </table></td> </tr> <tr> <td nowrap="nowrap" class="title_item">使用说明:</td> <td align="left"> 1、可以上传多个附件<br /> 2、页面参数字段名称:file_name, file_path<br /> 3、后台可以通过:<br /> String[] file_name = request.getParameterValues("file_name");<br /> String[] file_path = request.getParameterValues("file_path");<br /> 获取文件路径和文件名称,然后存储到数据库中。 </td> </tr> <tr> <td nowrap="nowrap" colspan="2"><html-el:submit property="bgsubmit" value=" 提交 " /> <input type="button" name="back" value="返回" onclick="history.back();" /></td> </tr> </table> </html-el:form> </div> </div> <div id="info"> <div> </div> </div> <script type="text/javascript" src="${ctx}/commons/scripts/jquery.js"></script> <script type="text/javascript" src="${ctx}/commons/swfupload/swfupload.min.js"></script> <script type="text/javascript" src="${ctx}/commons/swfupload/handlers.min.js"></script> <script type="text/javascript">//<![CDATA[ var addFileName = "上传文档"; if ("" != "${oa.map.document_path}") { addFileName = "重新上传"; } var swfu; var settings = { ctx : "${ctx}",// 路径 entity_id : "${af.map.id}",// 当前数据的id delete_url : "Cs.do",// ajax删除文件的url delete_method : "deleteFileForCosSwfupload",// ajax删除文件的method // upload_single_file : true,// 是否上传单个文件,默认上传多个文件 flash_url : "${ctx}/commons/swfupload/swfupload.swf", upload_url: "${ctx}/CosUploader.do", post_params: {"uploadTimer" : new Date()}, file_size_limit : "100 MB", file_types : "*.*", file_types_description : "All Files", file_upload_limit : 100, file_queue_limit : 0, custom_settings : { progressTarget : "fsUploadProgress", cancelButtonId : "btnCancel", upload_successful : false }, // Button settings button_placeholder_id : "spanButtonPlaceHolder", button_text: '<span class="theFont">'+ addFileName +'</span>', button_text_style: ".theFont {font-size: 12px;color:#005590;}", button_width: 52, button_cursor: -2, button_height: 22, // The event handler functions are defined in handlers.js file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, queue_complete_handler : queueComplete // Queue plugin event }; swfu = new SWFUpload(settings); //]]></script> <%@ include file="../../_public_page.jsp" %> </body> </html>
其中需要的swfupload.min 和 handlers.min.js ,下面有下载:swfupload.rar
4、效果图:
选择文件上传:可以选多个文件
上传后