脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → JS Struts2多文件上传

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

 更新时间：2018年08月29日 10:41:54   作者：袭烽  
这篇文章主要为大家详细介绍了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);" />  
              &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对应页面<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文件；

完毕!

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

您可能感兴趣的文章:

相关文章

  • Java实现邮箱发送功能实例（阿里云邮箱推送）

    Java实现邮箱发送功能实例（阿里云邮箱推送）

    这篇文章主要给大家介绍了关于Java实现邮箱发送功能的相关资料，利用阿里云邮箱推送，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • SpringAOP核心对象的创建图解

    SpringAOP核心对象的创建图解

    这篇文章主要介绍了SpringAOP核心对象的创建详解,通过使用AOP,我们可以将横切关注点(如日志记录、性能监控、事务管理等)从业务逻辑中分离出来,使得代码更加模块化、可维护性更高,需要的朋友可以参考下
    2023-10-10
  • SWT(JFace)体验之FillLayout布局

    SWT(JFace)体验之FillLayout布局

    FillLayout是非常简单的一种布局方式，它会以同样大小对父组件中的子组件进行布局，这些子组件将以一行或一列的形式排列。
    2009-06-06
  • 一文掌握IDEA中的Maven集成与创建

    一文掌握IDEA中的Maven集成与创建

    maven是用来帮助我们快速搭建项目结构与开发环境的好工具,这篇文章主要介绍了一文掌握IDEA中的Maven集成与创建,需要的朋友可以参考下
    2023-02-02
  • java的静态方法调用方式

    java的静态方法调用方式

    这篇文章主要介绍了java的静态方法调用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • SpringBoot将Spring fox更换为Springdoc的方法详解

    SpringBoot将Spring fox更换为Springdoc的方法详解

    由于项目中使用Spring fox已经不维护更新了,代码扫描,扫出问题,需要将Spring fox更换为Spring Doc,所以本文给大家介绍了SpringBoot将Spring fox更换为Springdoc的方法,文中有相关的代码供大家参考,需要的朋友可以参考下
    2024-01-01
  • Springboot如何使用.yml配置端口号

    Springboot如何使用.yml配置端口号

    这篇文章主要介绍了Springboot如何使用.yml配置端口号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 深入IDEA Debug问题透析详解

    深入IDEA Debug问题透析详解

    这篇文章主要为大家介绍了深入IDEA Debug问题透析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Java非侵入式API接口文档工具apigcc用法详解

    Java非侵入式API接口文档工具apigcc用法详解

    这篇文章主要介绍了Java非侵入式API接口文档工具apigcc用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • MyBatis中select语句中使用String[]数组作为参数的操作方法

    MyBatis中select语句中使用String[]数组作为参数的操作方法

    在 MyBatis 中,如何在 mapper.xml 配置文件中 select 语句中使用 String[] 数组作为参数呢,并且使用IN关键字来匹配数据库中的记录,这篇文章主要介绍了MyBatis中select语句中使用String[]数组作为参数,需要的朋友可以参考下
    2023-12-12

最新评论