快捷導(dǎo)航

JS+Struts2多文件上傳實例詳解

更新時間：2018年08月29日 10:41:54 作者：襲烽

這篇文章主要為大家詳細(xì)介紹了JS+Struts2多文件上傳實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS Struts2多文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

1、JSP頁面：

JS控制增加刪除多個上傳文件框，代碼如下：

<%@ page language="java" pageEncoding="UTF-8"%>  
<%@ taglib prefix="s" uri="/struts-tags"%>  
 
<!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>  
    <%@include file="../../_head.html"%>  
    <title>文件上傳</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">  
    <script language="javascript" type="text/javascript" 
      src="../js/common/common.js"></script>  
    <script type="text/javascript">  
        
       var pos = 1;  
      
       function addFileComponent() {  
        var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];  
        var elTr = document.getElementById('fileTr');  
        var elTr2 = document.getElementById('op');  
        var newEleTr = elTr.cloneNode(true);  
        newEleTr.id = "fileTr" + pos;     
        newEleTr.style.display = "";  
        inputs = newEleTr.getElementsByTagName('input');  
        inputs[0].id="file" + pos;  
        var elInput = inputs[1];  
        elInput.onclick=delFileComponent;  
        elInput.id="delbutton" + pos++;  
        elTable.insertBefore(newEleTr, elTr2);  
       }  
 
      function delFileComponent() {  
        var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];  
        var trArr = elTable.getElementsByTagName("tr");  
        var el = event.srcElement;  
        for(j = 0; j < trArr.length; j++) {  
          tr = trArr[j];  
          if(tr.getElementsByTagName("input")[1] == el) {  
            elTable.removeChild(tr);  
            pos--;  
            break;  
          }  
        }  
      }  
        
      function isValidateFile(obj){  
        var extend = obj.value.substring(obj.value.lastIndexOf(".")+1);  
        if(extend==""){  
        }else{  
          if(!(extend=="xls"||extend=="doc")){  
           alert("請上傳后綴名為xls或doc的文件!");  
           var nf = obj.cloneNode(true);  
           nf.value='';  
           obj.parentNode.replaceChild(nf, obj);  
           return false;  
          }  
        }  
        return true;  
      }  
    </script>  
  </head>  
  <body>  
    <%@ include file="/common/message.jsp"%>  
    <div class="body-box">  
      <div class="rhead">  
        <div class="rpos">  
          文件上傳(可同時上傳多份文件)  
        </div>  
        <div class="clear"></div>  
      </div>  
      <s:form id="ops" action="csc_mUploadFile" theme="simple" 
        cssClass="rhead" enctype = "multipart/form-data">  
        <table id="uploadTable" width="100%" border="0">  
          <tr>  
            <td>  
              <input type="file" id="file0" name="uploadFile" size="50" 
                onchange="isValidateFile(this);" />  
            </td>  
          </tr>  
          <tr id="fileTr" style="display: none;">  
            <td>  
              <input type="file" size="50" name="uploadFile" 
                onchange="isValidateFile(this);" />  
              &nbsp;  
              <input type="button" value="刪除" />  
            </td>  
          </tr>  
          <tr id="op">  
            <td>  
              <input type="submit" id="uploadbutton" value="上傳" />  
              &nbsp;  
              <input type="button" value="添加" id="addbutton" 
                onClick="addFileComponent();" />  
              &nbsp;  
            </td>  
          </tr>  
        </table>  
      </s:form>  
      <table class="pn-ltable" width="100%" cellspacing="1" cellpadding="0" 
        border="0">  
        <thead class="pn-lthead">  
          <tr>  
            <th>  
              序號  
            </th>  
            <th>  
              文件名  
            </th>  
            <th>  
              上傳時間  
            </th>  
          </tr>  
        </thead>  
        <tbody class="pn-ltbody">  
          <tr onmouseover="Pn.LTable.lineOver(this);" 
            onmouseout="Pn.LTable.lineOut(this);" 
            onclick="Pn.LTable.lineSelect(this);">  
            <td>  
            </td>  
            <td>  
            </td>  
            <td>  
            </td>  
          </tr>  
        </tbody>  
      </table>  
    </div>  
  </body>  
</html>

2、Action后臺處理上傳文件：

//uploadFile對應(yīng)頁面<input type="file" name="uploadFile"> 
private List<File> uploadFile;  
//文件名對應(yīng)uploadFile+“FileName”，要不獲取不到文件名 
private List<String> uploadFileFileName;   
// 文件上傳  
public String mUploadFile() {  
  if (null == uploadFile) {  
  this.addActionError("請上傳文件!");  
  } else {  
  String fileName = "";  
   try {  
           //在自己代碼中控制文件上傳的服務(wù)器目錄 
     String directory = ServletActionContext.getServletContext().getRealPath("/uploads");  
           //判斷該目錄是否存在，不存在則創(chuàng)建 
           FileUtil.makeDir(directory);  
           //循環(huán)處理上傳的文件 
      for(int i=0,j=uploadFile.size();i<j;i++){  
        fileName = uploadFileFileName.get(i);  
        String filePath = directory + File.separator + fileName;  
        FileUtil.uploadFile(uploadFile.get(i), new File(filePath));  
      }  
    } catch (IOException e) {  
        this.addActionMessage("");  
    }  
      this.addActionMessage("文件上傳成功!");  
  }  
  return "fileUpload";  
}

FileUtil代碼如下：

public class FileUtil {
 
 private static final int BUFFER_SIZE = 16 * 1024;
 
 public static void uploadFile(File src, File dst) throws IOException {
 
 InputStream in = null;
 OutputStream out = null;
 try {
  in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
  out = new BufferedOutputStream(new FileOutputStream(dst),
   BUFFER_SIZE);
  byte[] buffer = new byte[BUFFER_SIZE];
  while (in.read(buffer) > 0) {
  out.write(buffer);
  }
 } finally {
  if (null != in) {
  in.close();
  }
  if (null != out) {
  out.close();
  }
 }
 
 }
 
 public static String getExtention(String fileName) {
 int pos = fileName.lastIndexOf(".");
 return fileName.substring(pos);
 }
 
 public static void makeDir(String directory) {
 File dir = new File(directory);
 
 if (!dir.isDirectory()) {
  dir.mkdirs();
 }
 
 }
 
 public static String generateFileName(String fileName)
  throws UnsupportedEncodingException {
 DateFormat format = new SimpleDateFormat("yyMMddHHmmss");
 String formatDate = format.format(new Date());
 String extension = fileName.substring(fileName.lastIndexOf("."));
 fileName = new String(fileName.getBytes("iso8859-1"), "gb2312");
 return fileName + "_" + formatDate + new Random().nextInt(10000)
  + extension;
 }
 
}

擴(kuò)展：

1.可以實現(xiàn)帶進(jìn)度條的上傳與下載；
2.可以用xml文件記錄上傳的文件清單，并且可以根據(jù)頁面對上傳文件的操作來修改相應(yīng)的xml文件；

完畢!

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: