<%@taglibprefix="s"uri="/struts-tags"%>
注册 登录
> 编程技术

JS+Struts2多文件上传完整示例

系统 1864 0
1、JSP页面：
JS控制增加删除多个上传文件框，代码如下：
Java代码
  1. <%@pagelanguage= "java" pageEncoding= "UTF-8" %>
  2. <%@taglibprefix= "s" uri= "/struts-tags" %>
  4. <!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  5. <htmlxmlns= "http://www.w3.org/1999/xhtml" >
  6. <head>
  7. <% @include file= "../../_head.html" %>
  8. <title> 文件上传 </title>
  9. <metahttp-equiv= "pragma" content= "no-cache" >
  10. <metahttp-equiv= "cache-control" content= "no-cache" >
  11. <metahttp-equiv= "expires" content= "0" >
  12. <scriptlanguage= "javascript" type= "text/javascript"
  13. src= "../js/common/common.js" ></script>
  14. <scripttype= "text/javascript" >
  16. varpos= 1 ;
  18. functionaddFileComponent(){
  19. varelTable=document.getElementById( 'uploadTable' ).getElementsByTagName( 'tbody' )[ 0 ];
  20. varelTr=document.getElementById( 'fileTr' );
  21. varelTr2=document.getElementById( 'op' );
  22. varnewEleTr=elTr.cloneNode( true );
  23. newEleTr.id= "fileTr" +pos;
  24. newEleTr.style.display= "" ;
  25. inputs=newEleTr.getElementsByTagName( 'input' );
  26. inputs[ 0 ].id= "file" +pos;
  27. varelInput=inputs[ 1 ];
  28. elInput.onclick=delFileComponent;
  29. elInput.id= "delbutton" +pos++;
  30. elTable.insertBefore(newEleTr,elTr2);
  31. }
  33. functiondelFileComponent(){
  34. varelTable=document.getElementById( 'uploadTable' ).getElementsByTagName( 'tbody' )[ 0 ];
  35. vartrArr=elTable.getElementsByTagName( "tr" );
  36. varel=event.srcElement;
  37. for (j= 0 ;j<trArr.length;j++){
  38. tr=trArr[j];
  39. if (tr.getElementsByTagName( "input" )[ 1 ]==el){
  40. elTable.removeChild(tr);
  41. pos--;
  42. break ;
  43. }
  44. }
  45. }
  47. functionisValidateFile(obj){
  48. varextend=obj.value.substring(obj.value.lastIndexOf( "." )+ 1 );
  49. if (extend== "" ){
  50. } else {
  51. if (!(extend== "xls" ||extend== "doc" )){
  52. alert( "请上传后缀名为xls或doc的文件!" );
  53. varnf=obj.cloneNode( true );
  54. nf.value= '' ;
  55. obj.parentNode.replaceChild(nf,obj);
  56. return false ;
  57. }
  58. }
  59. return true ;
  60. }
  61. </script>
  62. </head>
  63. <body>
  64. <%@includefile= "/common/message.jsp" %>
  65. <div class = "body-box" >
  66. <div class = "rhead" >
  67. <div class = "rpos" >
  68. 文件上传 (可同时上传多份文件)
  69. </div>
  70. <div class = "clear" ></div>
  71. </div>
  72. <s:formid= "ops" action= "csc_mUploadFile" theme= "simple"
  73. cssClass= "rhead" enctype= "multipart/form-data" >
  74. <tableid= "uploadTable" width= "100%" border= "0" >
  75. <tr>
  76. <td>
  77. <inputtype= "file" id= "file0" name= "uploadFile" size= "50"
  78. onchange= "isValidateFile(this);" />
  79. </td>
  80. </tr>
  81. <trid= "fileTr" style= "display:none;" >
  82. <td>
  83. <inputtype= "file" size= "50" name= "uploadFile"
  84. onchange= "isValidateFile(this);" />
  85. &nbsp;
  86. <inputtype= "button" value= "删除" />
  87. </td>
  88. </tr>
  89. <trid= "op" >
  90. <td>
  91. <inputtype= "submit" id= "uploadbutton" value= "上传" />
  92. &nbsp;
  93. <inputtype= "button" value= "添加" id= "addbutton"
  94. onClick= "addFileComponent();" />
  95. &nbsp;
  96. </td>
  97. </tr>
  98. </table>
  99. </s:form>
  100. <table class = "pn-ltable" width= "100%" cellspacing= "1" cellpadding= "0"
  101. border= "0" >
  102. <thead class = "pn-lthead" >
  103. <tr>
  104. <th>
  105. 序号
  106. </th>
  107. <th>
  108. 文件名
  109. </th>
  110. <th>
  111. 上传时间
  112. </th>
  113. </tr>
  114. </thead>
  115. <tbody class = "pn-ltbody" >
  116. <tronmouseover= "Pn.LTable.lineOver(this);"
  117. onmouseout= "Pn.LTable.lineOut(this);"
  118. onclick= "Pn.LTable.lineSelect(this);" >
  119. <td>
  120. </td>
  121. <td>
  122. </td>
  123. <td>
  124. </td>
  125. </tr>
  126. </tbody>
  127. </table>
  128. </div>
  129. </body>
  130. </html>


2、Action后台处理上传文件：
Java代码
  1. //uploadFile对应页面<inputtype="file"name="uploadFile">
  2. private List<File>uploadFile;
  3. //文件名对应uploadFile+“FileName”，要不获取不到文件名
  4. private List<String>uploadFileFileName;
  5. // 文件上传
  6. public StringmUploadFile(){
  7. if ( null ==uploadFile){
  8. this .addActionError( "请上传文件!" );
  9. } else {
  10. StringfileName= "" ;
  11. try {
  12. //在自己代码中控制 文件上传 的服务器目录
  13. Stringdirectory=ServletActionContext.getServletContext().getRealPath( "/uploads" );
  14. //判断该目录是否存在，不存在则创建
  15. FileUtil.makeDir(directory);
  16. //循环处理上传的文件
  17. for ( int i= 0 ,j=uploadFile.size();i<j;i++){
  18. fileName=uploadFileFileName.get(i);
  19. StringfilePath=directory+File.separator+fileName;
  20. FileUtil.uploadFile(uploadFile.get(i), new File(filePath));
  21. }
  22. } catch (IOExceptione){
  23. this .addActionMessage( "" );
  24. }
  25. this .addActionMessage( " 文件上传 成功!" );
  26. }
  27. return "fileUpload" ;
  28. }

FileUtil代码如下：
Java代码
  1. public class FileUtil{
  3. private static final int BUFFER_SIZE= 16 * 1024 ;
  5. public static void uploadFile(Filesrc,Filedst) throws IOException{
  7. InputStreamin= null ;
  8. OutputStreamout= null ;
  9. try {
  10. in= new BufferedInputStream( new FileInputStream(src),BUFFER_SIZE);
  11. out= new BufferedOutputStream( new FileOutputStream(dst),
  12. BUFFER_SIZE);
  13. byte []buffer= new byte [BUFFER_SIZE];
  14. while (in.read(buffer)> 0 ){
  15. out.write(buffer);
  16. }
  17. } finally {
  18. if ( null !=in){
  19. in.close();
  20. }
  21. if ( null !=out){
  22. out.close();
  23. }
  24. }
  26. }
  28. public static StringgetExtention(StringfileName){
  29. int pos=fileName.lastIndexOf( "." );
  30. return fileName.substring(pos);
  31. }
  33. public static void makeDir(Stringdirectory){
  34. Filedir= new File(directory);
  36. if (!dir.isDirectory()){
  37. dir.mkdirs();
  38. }
  40. }
  42. public static StringgenerateFileName(StringfileName)
  43. throws UnsupportedEncodingException{
  44. DateFormatformat= new SimpleDateFormat( "yyMMddHHmmss" );
  45. StringformatDate=format.format( new Date());
  46. Stringextension=fileName.substring(fileName.lastIndexOf( "." ));
  47. fileName= new String(fileName.getBytes( "iso8859-1" ), "gb2312" );
  48. return fileName+ "_" +formatDate+ new Random().nextInt( 10000 )
  49. +extension;
  50. }
  52. }



扩展：
1.可以实现带进度条的上传与下载；
2.可以用xml文件记录上传的文件清单，并且可以根据页面对上传文件的操作来修改相应的xml文件；

JS+Struts2多文件上传完整示例


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论