您的位置: 首页  >  文章  >  SWFUpload+COS 上传组件+servelet 实现大附件上传

SWFUpload+COS 上传组件+servelet 实现大附件上传

分类: 文章 • 2024-09-17 22:39:34

去年的时候整理过例子，源地址我的iteye bolg：

http://blog.****.net/misswuyang/article/details/5412375

这几天一直在整理一些以前的例子，并且优化了一下，也改写了一些swfupload 的源码，使其适应项目的开发。

新版本在线预览地址：http://220.178.14.19:8081/cosswfupload

1、需要的Servlet类（上传用）和jar包：


SWFUpload+COS 上传组件+servelet 实现大附件上传
下面有下载:CosUploaderServlet.rar

2、Web.xml配置：

Xml代码
  1. <!--COS大附件上传限制500MBEGIN-->
  2. <servlet>
  3. <servlet-name>CosUploader</servlet-name>
  4. <servlet-class>com.ebiz.lv.web.servlet.uploader.CosUploaderServlet</servlet-class>
  5. <init-param>
  6. <param-name>fileSizeLimit</param-name>
  7. <param-value>500</param-value>
  8. </init-param>
  9. </servlet>
  10. <servlet-mapping>
  11. <servlet-name>CosUploader</servlet-name>
  12. <url-pattern>/CosUploader.do</url-pattern>
  13. </servlet-mapping>
  14. <!--COS大附件上传限制500MEND-->

3、页面：

Html代码
  1. <%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%>
  2. <%@includefile="../../commons/pages/taglibs.jsp"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <htmlxmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  7. <title>COSswfupload大附件上传</title>
  8. <linkhref="${ctx}/styles/style1.css"rel="stylesheet"type="text/css"/>
  9. <linkhref="${ctx}/commons/swfupload/style/default.css"rel="stylesheet"type="text/css"/>
  10. </head>
  11. <body>
  12. <divclass="wyTitle">COSswfupload大附件上传</div>
  13. <divclass="container">
  14. <divclass="mapWrap"><br/>
  15. <html-el:formaction="/Index.do">
  16. <html-el:hiddenproperty="method"value="save"/>
  17. <tablewidth="100%"border="0"align="left"cellpadding="1"cellspacing="1"class="datagrid">
  18. <tr>
  19. <tdnowrap="nowrap"class="title_item">文档地址：</td>
  20. <tdalign="left"><tablewidth="600"border="0"cellpadding="1"cellspacing="0">
  21. <tr>
  22. <tdwidth="14%"><spanid="spanButtonPlaceHolder"></span><imgtitle="添加小于100M的文件作为附件"alt="添加小于100M的文件作为附件"src="${ctx}/commons/swfupload/style/images/100M.jpg"/></td>
  23. <td><spanid="btnCancel"onclick="swfu.cancelQueue();"style="font-family:Verdana;color:#005590;cursor:pointer;">取消上传</span></td>
  24. </tr>
  25. <tr>
  26. <tdcolspan="2"><divclass=""id="divCreateElementsToForm"></div></td>
  27. </tr>
  28. <tr>
  29. <tdcolspan="2"><divclass=""id="fsUploadProgress"></div></td>
  30. </tr>
  31. </table></td>
  32. </tr>
  33. <tr>
  34. <tdnowrap="nowrap"class="title_item">使用说明：</td>
  35. <tdalign="left">1、可以上传多个附件<br/>
  36. 2、页面参数字段名称：file_name,file_path<br/>
  37. 3、后台可以通过:<br/>
  38. String[]file_name=request.getParameterValues("file_name");<br/>
  39. String[]file_path=request.getParameterValues("file_path");<br/>
  40. 获取文件路径和文件名称，然后存储到数据库中。</td>
  41. </tr>
  42. <tr>
  43. <tdnowrap="nowrap"colspan="2"><html-el:submitproperty="bgsubmit"value="提交"/>
  44. <inputtype="button"name="back"value="返回"onclick="history.back();"/></td>
  45. </tr>
  46. </table>
  47. </html-el:form>
  48. </div>
  49. </div>
  50. <divid="info">
  51. <div></div>
  52. </div>
  53. <scripttype="text/javascript"src="${ctx}/commons/scripts/jquery.js"></script>
  54. <scripttype="text/javascript"src="${ctx}/commons/swfupload/swfupload.min.js"></script>
  55. <scripttype="text/javascript"src="${ctx}/commons/swfupload/handlers.min.js"></script>
  56. <scripttype="text/javascript">//<![CDATA[
  58. varaddFileName="上传文档";
  59. if(""!="${oa.map.document_path}"){
  60. addFileName="重新上传";
  61. }
  62. varswfu;
  63. varsettings={
  64. ctx:"${ctx}",//路径
  65. entity_id:"${af.map.id}",//当前数据的id
  66. delete_url:"Cs.do",//ajax删除文件的url
  67. delete_method:"deleteFileForCosSwfupload",//ajax删除文件的method
  68. //upload_single_file:true,//是否上传单个文件,默认上传多个文件
  69. flash_url:"${ctx}/commons/swfupload/swfupload.swf",
  70. upload_url:"${ctx}/CosUploader.do",
  71. post_params:{"uploadTimer":newDate()},
  72. file_size_limit:"100MB",
  73. file_types:"*.*",
  74. file_types_description:"AllFiles",
  75. file_upload_limit:100,
  76. file_queue_limit:0,
  77. custom_settings:{
  78. progressTarget:"fsUploadProgress",
  79. cancelButtonId:"btnCancel",
  80. upload_successful:false
  81. },
  83. //Buttonsettings
  84. button_placeholder_id:"spanButtonPlaceHolder",
  85. button_text:'<spanclass="theFont">'+addFileName+'</span>',
  86. button_text_style:".theFont{font-size:12px;color:#005590;}",
  87. button_width:52,
  88. button_cursor:-2,
  89. button_height:22,
  91. //Theeventhandlerfunctionsaredefinedinhandlers.js
  92. file_queued_handler:fileQueued,
  93. file_queue_error_handler:fileQueueError,
  94. file_dialog_complete_handler:fileDialogComplete,
  95. upload_start_handler:uploadStart,
  96. upload_progress_handler:uploadProgress,
  97. upload_error_handler:uploadError,
  98. upload_success_handler:uploadSuccess,
  99. upload_complete_handler:uploadComplete,
  100. queue_complete_handler:queueComplete//Queuepluginevent
  101. };
  103. swfu=newSWFUpload(settings);
  104. //]]></script>
  105. <%@includefile="../../_public_page.jsp"%>
  106. </body>
  107. </html>

其中需要的swfupload.min 和 handlers.min.js ，下面有下载：swfupload.rar


4、效果图：

选择文件上传：可以选多个文件


SWFUpload+COS 上传组件+servelet 实现大附件上传
上传完成后：


SWFUpload+COS 上传组件+servelet 实现大附件上传

点击提交后：


SWFUpload+COS 上传组件+servelet 实现大附件上传

相关推荐