读书人
栏目▼

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

发布时间： 2012-10-26 10:30:59 作者： rapoo

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

1、JSP页面：Java代码

  1. <%@?page?language="java"?pageEncoding="UTF-8"%> ??
  2. <%@?taglib?prefix="s"?uri="/struts-tags"%> ??
  3. ??
  4. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ??
  5. <html?xmlns="http://www.w3.org/1999/xhtml"> ??
  6. ????<head> ??
  7. ????????<%@include?file="../../_head.html"%> ??
  8. ????????<title>文件上传</title> ??
  9. ????????<meta?http-equiv="pragma"?content="no-cache"> ??
  10. ????????<meta?http-equiv="cache-control"?content="no-cache"> ??
  11. ????????<meta?http-equiv="expires"?content="0"> ??
  12. ????????<script?language="javascript"?type="text/javascript"??
  13. ????????????src="../js/common/common.js"></script> ??
  14. ????????<script?type="text/javascript"> ??
  15. ????????????? ??
  16. ??????????????var?pos?=?1; ??
  17. ???????? ??
  18. ??????????????function?addFileComponent()?{ ??
  19. ????????????????var?elTable?=?document.getElementById('uploadTable').getElementsByTagName('tbody')[0]; ??
  20. ????????????????var?elTr?=?document.getElementById('fileTr'); ??
  21. ????????????????var?elTr2?=?document.getElementById('op'); ??
  22. ????????????????var?newEleTr?=?elTr.cloneNode(true); ??
  23. ????????????????newEleTr.id?=?"fileTr"?+?pos;??????? ??
  24. ????????????????newEleTr.style.display?=?""; ??
  25. ????????????????inputs?=?newEleTr.getElementsByTagName('input'); ??
  26. ????????????????inputs[0].id="file"?+?pos; ??
  27. ????????????????var?elInput?=?inputs[1]; ??
  28. ????????????????elInput.onclick=delFileComponent; ??
  29. ????????????????elInput.id="delbutton"?+?pos++; ??
  30. ????????????????elTable.insertBefore(newEleTr,?elTr2); ??
  31. ?????????????} ??
  32. ??
  33. ????????????function?delFileComponent()?{ ??
  34. ????????????????var?elTable?=?document.getElementById('uploadTable').getElementsByTagName('tbody')[0]; ??
  35. ????????????????var?trArr?=?elTable.getElementsByTagName("tr"); ??
  36. ????????????????var?el?=?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. ????????????} ??
  46. ???????????? ??
  47. ????????????function?isValidateFile(obj){ ??
  48. ???????????????var?extend?=?obj.value.substring(obj.value.lastIndexOf(".")+1); ??
  49. ???????????????if(extend==""){ ??
  50. ???????????????}else{ ??
  51. ???????????????????if(!(extend=="xls"||extend=="doc")){ ??
  52. ??????????????????????alert("请上传后缀名为xls或doc的文件!"); ??
  53. ??????????????????????var?nf?=?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. ????????<%@?include?file="/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:form?id="ops"?action="csc_mUploadFile"?theme="simple"??
  73. ????????????????cssClass="rhead"??enctype?=?"multipart/form-data"> ??
  74. ????????????????<table?id="uploadTable"?width="100%"?border="0"> ??
  75. ????????????????????<tr> ??
  76. ????????????????????????<td> ??
  77. ????????????????????????????<input?type="file"?id="file0"?name="uploadFile"?size="50"??
  78. ????????????????????????????????onchange="isValidateFile(this);"?/> ??
  79. ????????????????????????</td> ??
  80. ????????????????????</tr> ??
  81. ????????????????????<tr?id="fileTr"?style="display:?none;"> ??
  82. ????????????????????????<td> ??
  83. ????????????????????????????<input?type="file"?size="50"?name="uploadFile"??
  84. ????????????????????????????????onchange="isValidateFile(this);"?/> ??
  85. ????????????????????????????  ??
  86. ????????????????????????????<input?type="button"?value="删除"?/> ??
  87. ????????????????????????</td> ??
  88. ????????????????????</tr> ??
  89. ????????????????????<tr?id="op"> ??
  90. ????????????????????????<td> ??
  91. ????????????????????????????<input?type="submit"?id="uploadbutton"?value="上传"?/> ??
  92. ????????????????????????????  ??
  93. ????????????????????????????<input?type="button"?value="添加"?id="addbutton"??
  94. ????????????????????????????????onClick="addFileComponent();"?/> ??
  95. ????????????????????????????  ??
  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. ????????????????????<tr?onmouseover="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对应页面<input?type="file"?name="uploadFile">private?List<File>?uploadFile; ??
  2. ????????//文件名对应uploadFile+“FileName”，要不获取不到文件名private?List<String>?uploadFileFileName;??? ??
  3. //?文件上传public?String?mUploadFile()?{ ??
  4. ???if?(null?==?uploadFile)?{ ??
  5. ????this.addActionError("请上传文件!"); ??
  6. ???}?else?{ ??
  7. ????String?fileName?=?""; ??
  8. ??????try?{ ??
  9. ??????????????????????//在自己代码中控制文件上传的服务器目录"/uploads"); ??
  10. ??????????????????????//判断该目录是否存在，不存在则创建//循环处理上传的文件for(int?i=0,j=uploadFile.size();i<j;i++){ ??
  11. ????????????????fileName?=?uploadFileFileName.get(i); ??
  12. ????????????????String?filePath?=?directory?+?File.separator?+?fileName; ??
  13. ????????????????FileUtil.uploadFile(uploadFile.get(i),?new?File(filePath)); ??
  14. ????????????} ??
  15. ????????}?catch?(IOException?e)?{ ??
  16. ????????????????this.addActionMessage(""); ??
  17. ????????} ??
  18. ???????????this.addActionMessage("文件上传成功!"); ??
  19. ????} ??
  20. ????return?"fileUpload"; ??
  21. }??

FileUtil代码如下：Java代码
  1. public?class?FileUtil?{ ??
  2. ??
  3. ????private?static?final?int?BUFFER_SIZE?=?16?*?1024; ??
  4. ??
  5. ????public?static?void?uploadFile(File?src,?File?dst)?throws?IOException?{ ??
  6. ??
  7. ????????InputStream?in?=?null; ??
  8. ????????OutputStream?out?=?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. ????????} ??
  25. ??
  26. ????} ??
  27. ??
  28. ????public?static?String?getExtention(String?fileName)?{ ??
  29. ????????int?pos?=?fileName.lastIndexOf("."); ??
  30. ????????return?fileName.substring(pos); ??
  31. ????} ??
  32. ??
  33. ????public?static?void?makeDir(String?directory)?{ ??
  34. ????????File?dir?=?new?File(directory); ??
  35. ??
  36. ????????if?(!dir.isDirectory())?{ ??
  37. ????????????dir.mkdirs(); ??
  38. ????????} ??
  39. ??
  40. ????} ??
  41. ??
  42. ????public?static?String?generateFileName(String?fileName) ??
  43. ????????????throws?UnsupportedEncodingException?{ ??
  44. ????????DateFormat?format?=?new?SimpleDateFormat("yyMMddHHmmss"); ??
  45. ????????String?formatDate?=?format.format(new?Date()); ??
  46. ????????String?extension?=?fileName.substring(fileName.lastIndexOf(".")); ??
  47. ????????fileName?=?new?String(fileName.getBytes("iso8859-1"),?"gb2312"); ??
  48. ????????return?fileName?+?"_"?+?formatDate?+?new?Random().nextInt(10000) ??
  49. ????????????????+?extension; ??
  50. ????} ??
  51. ??
  52. }??



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

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net