您的位置: 首页  >  IT文章  >  JS+Struts2多文件下传完整示例

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

分类: IT文章 • 2024-08-22 20:58:19
JS+Struts2多文件上传完整示例

1、JSP页面： 
JS控制增加删除多个上传文件框，代码如下： 

Java代码 JS+Struts2多文件下传完整示例
  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.                             &nbsp;   
  86.                             <input type="button" value="删除" />   
  87.                         </td>   
  88.                     </tr>   
  89.                     <tr id="op">   
  90.                         <td>   
  91.                             <input type="submit" id="uploadbutton" value="上传" />   
  92.                             &nbsp;   
  93.                             <input type="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.                     <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代码 JS+Struts2多文件下传完整示例
  1.         //uploadFile对应页面<input type="file" name="uploadFile">   
  2. private List<File> uploadFile;   
  3.         //文件名对应uploadFile+“FileName”，要不获取不到文件名   
  4. private List<String> uploadFileFileName;      
  5. // 文件上传   
  6. public String mUploadFile() {   
  7.    if (null == uploadFile) {   
  8.     this.addActionError("请上传文件!");   
  9.    } else {   
  10.     String fileName = "";   
  11.       try {   
  12.                       //在自己代码中控制文件上传的服务器目录   
  13.          String directory = 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.                 String filePath = directory + File.separator + fileName;   
  20.                 FileUtil.uploadFile(uploadFile.get(i), new File(filePath));   
  21.             }   
  22.         } catch (IOException e) {   
  23.                 this.addActionMessage("");   
  24.         }   
  25.            this.addActionMessage("文件上传成功!");   
  26.     }   
  27.     return "fileUpload";   
  28. }  

FileUtil代码如下： 
Java代码 JS+Struts2多文件下传完整示例
  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文件；

相关推荐