JS+Struts2多文件上传实例详解
本文实例为大家分享了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文件;
完毕!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)