JS+Struts2多文件上传实例详解

2024-07-14 08:42:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了JS Struts2多文件上传的具体代码，供大家参考，具体内容如下

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);" />                                 <input type="button" value="删除" />              </td>            </tr>            <tr id="op">              <td>                <input type="submit" id="uploadbutton" value="上传" />                                 <input type="button" value="添加" id="addbutton"                 onClick="addFileComponent();" />                               </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对应页面<input type="file" name="uploadFile"> private List<File> uploadFile;  //文件名对应uploadFile+“FileName”，要不获取不到文件名 private List<String> uploadFileFileName;   // 文件上传  public String mUploadFile() {    if (null == uploadFile) {    this.addActionError("请上传文件!");    } else {    String fileName = "";     try {             //在自己代码中控制文件上传的服务器目录      String directory = ServletActionContext.getServletContext().getRealPath("/uploads");             //判断该目录是否存在，不存在则创建            FileUtil.makeDir(directory);             //循环处理上传的文件       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; } }

扩展：

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

完毕!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JAVA教程频道。

上一篇：SpringBoot JPA实现查询多值

下一篇：Java如何找出数组中重复的数字