iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >AjaxFileUpload+Struts2如何实现多文件上传功能
  • 920
分享到

AjaxFileUpload+Struts2如何实现多文件上传功能

2024-04-02 19:04:59 920人浏览 八月长安
摘要

这篇文章给大家分享的是有关ajaxFileUpload+Struts2如何实现多文件上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。单文件和多文件的实现区别主要修改两点,一

这篇文章给大家分享的是有关ajaxFileUpload+Struts2如何实现多文件上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

单文件和多文件的实现区别主要修改两点,

一是插件ajaxfileupload.js里接收file文件ID的方式

二是后台action是数组形式接收

1、ajaxFileUpload文件下载地址Http://www.PHPletter.com/Demo/AjaxFileUpload-Demo/

2、引入Jquery-1.8.0.min.js、ajaxFileUpload.js文件

3、文件上传页面核心代码

<body> 
  <fORM action="" enctype="multipart/form-data"> 
    <h3> 
      多文件上传 
    </h3> 
    <input type="file" id="file1" name="file" /> 
    </br> 
    <input type="file" id="file2" name="file" /> 
    </br> 
    <input type="file" id="file3" name="file" /> 
    </br> 
    <span> 
      <table id="down"> 
      </table> 
    </span> 
    </br> 
    <input type="button" onclick="fileUpload();" value="上传"> 
  </form> 
</body> 
<script type="text/javascript"> 
  function fileUpload() { 
    var files = ['file1','file2','file3']; //将上传三个文件 ID 分别为file2,file2,file3 
    $.ajaxFileUpload( { 
      url : 'fileUploadAction',   //用于文件上传的服务器端请求地址  
      secureuri : false,      //一般设置为false  
      fileElementId : files,    //文件上传的id属性 <input type="file" id="file" name="file" />  
      dataType : 'JSON',      //返回值类型 一般设置为json  
      success : function(data, status) { 
        var fileNames = data.fileFileName; //返回的文件名  
        var filePaths = data.filePath;   //返回的文件地址  
        for(var i=0;i<data.fileFileName.length;i++){ 
          //将上传后的文件 添加到页面中 以进行下载 
          $("#down").after("<tr><td height='25'>"+fileNames[i]+ 
              "</td><td><a href='downloadFile?downloadFilePath="+filePaths[i]+"'>下载</a></td></tr>") 
        } 
      } 
    }) 
  } 
</script>

以上fileElementId属性接收的files参数为['file1','file2','file3']

由于是多文件,所以我们需要修改ajaxfileupload.js 找到以下代码

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);

修改为:

for(var i in fileElementId){  
  var oldElement = jQuery('#' + fileElementId[i]);  
  var newElement = jQuery(oldElement).clone();  
  jQuery(oldElement).attr('id', fileId);  
  jQuery(oldElement).before(newElement);  
  jQuery(oldElement).appendTo(form);  
}

4、文件上传Action

public class FileAction { 
  private File[] file;       //文件  
  private String[] fileFileName;  //文件名   
  private String[] filePath;    //文件路径 
  private String downloadFilePath; //文件下载路径 
  private InputStream inputStream;  
   
  public String fileUpload() { 
    String path = ServletActionContext.getServletContext().getRealPath("/upload"); 
    File file = new File(path); // 判断文件夹是否存在,如果不存在则创建文件夹 
    if (!file.exists()) { 
      file.mkdir(); 
    } 
    try { 
      if (this.file != null) { 
        File f[] = this.getFile(); 
        filePath = new String[f.length]; 
        for (int i = 0; i < f.length; i++) { 
          String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名 
          String name = fileName + fileFileName[i].substring(fileFileName[i].lastIndexOf(".")); //保存在硬盘中的文件名 
          FileInputStream inputStream = new FileInputStream(f[i]); 
          FileOutputStream outputStream = new FileOutputStream(path+ "\\" + name); 
          byte[] buf = new byte[1024]; 
          int length = 0; 
          while ((length = inputStream.read(buf)) != -1) { 
            outputStream.write(buf, 0, length); 
          } 
          inputStream.close(); 
          outputStream.flush(); 
          //文件保存的完整路径 
          // 如:D:\Tomcat6\WEBapps\struts_ajaxfileupload\\upload\a0be14a1-f99e-4239-b54c-b37c3083134a.png 
          filePath[i] = path + "\\" + name; 
        } 
      } 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
    return "success"; 
  } 
   
  public String downloadFile() { 
    String path = downloadFilePath; 
    httpservletResponse response = ServletActionContext.getResponse(); 
    try { 
      // path是指欲下载的文件的路径。 
      File file = new File(path); 
      // 取得文件名。 
      String filename = file.getName(); 
      // 以流的形式下载文件。 
      InputStream fis = new BufferedInputStream(new FileInputStream(path)); 
      byte[] buffer = new byte[fis.available()]; 
      fis.read(buffer); 
      fis.close(); 
      // 清空response 
      response.reset(); 
      // 设置response的Header 
      String filenameString = new String(filename.getBytes("gbk"),"iso-8859-1"); 
      response.addHeader("Content-Disposition", "attachment;filename="+ filenameString); 
      response.addHeader("Content-Length", "" + file.length()); 
      OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); 
      response.setContentType("application/octet-stream"); 
      toClient.write(buffer); 
      toClient.flush(); 
      toClient.close(); 
    } catch (IOException ex) { 
      ex.printStackTrace(); 
    } 
    return null; 
  } 
   
}

5、struts配置

<!DOCTYPE struts PUBLIC  
  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
  "http://struts.apache.org/dtds/struts-2.0.dtd"> 
<struts> 
  <package name="ajax_code" extends="json-default"> 
    <!-- 文件上传 --> 
    <action name="fileUploadAction" class="com.itmyhome.FileAction" method="fileUpload"> 
      <result type="json" name="success"> 
        <param name="contentType">text/html</param> 
      </result> 
    </action> 
  </package> 
  <package name="jsp_code" extends="struts-default"> 
    <!-- 文件下载 -->    
    <action name="downloadFile" class="com.itmyhome.FileAction" method="downloadFile">   
      <result type="stream">   
         <param name="contentType">application/octet-stream</param>   
         <param name="inputName">inputStream</param>   
         <param name="contentDisposition">attachment;filename=${fileName}</param>   
         <param name="bufferSize">4096</param>   
      </result>   
    </action>  
  </package> 
</struts>

浏览器中输入:http://localhost:8080/struts_ajaxfileupload/index.jsp  即可进行文件上传

如图:

AjaxFileUpload+Struts2如何实现多文件上传功能

感谢各位的阅读!关于“AjaxFileUpload+Struts2如何实现多文件上传功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: AjaxFileUpload+Struts2如何实现多文件上传功能

本文链接: https://www.lsjlt.com/news/71237.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AjaxFileUpload+Struts2如何实现多文件上传功能
    这篇文章给大家分享的是有关AjaxFileUpload+Struts2如何实现多文件上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。单文件和多文件的实现区别主要修改两点,一...
    99+
    2022-10-19
  • ajaxFileupload如何实现多文件上传功能
    这篇文章将为大家详细讲解有关ajaxFileupload如何实现多文件上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。打开google 搜索"ajaxFi...
    99+
    2022-10-19
  • AjaxFileUpload结合Struts2怎么实现多文件上传
    这篇文章主要介绍了AjaxFileUpload结合Struts2怎么实现多文件上传,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。基于上篇基本...
    99+
    2022-10-19
  • Struts2实现多文件上传功能
    前台form 表单:设置method=post,enctype=multipart/form-data。struts2在原有的上传解析器继承上做了进一步封装,更进一步简化了文件上传。Action需要使用3个属性来封装该文件域的信息:(1)类...
    99+
    2023-05-31
    struts2 上传 st
  • Struts2实现单文件或多文件上传功能
    一、简述Struts2的文件上传其实也是通过拦截器来实现的,只是该拦截器定义为默认拦截器了,所以不用自己去手工配置,<interceptor name="fileUpload" class="org.apache.struts2.in...
    99+
    2023-05-31
    struts2 文件上传 st
  • SpringMVC使用ajaxfileupload如何实现一个文件上传功能
    这篇文章将为大家详细讲解有关SpringMVC使用ajaxfileupload如何实现一个文件上传功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。jQuery没有提供ajax的文件上传,我...
    99+
    2023-05-31
    springmvc ajaxfileupload 文件上传
  • Struts2实现文件上传时显示进度条功能
           最近在做一个资源共享的项目中,采用了Struts2.1.8+Spring2.5.6+hibernate3.32的框架整合方式进行开发。在文件上传这块,因为需要实现文件...
    99+
    2023-05-31
    struts2 上传 进度条
  • 怎么使用Struts2实现一个文件上传功能
    这期内容当中小编将会给大家带来有关怎么使用Struts2实现一个文件上传功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。upload.jsp 这个页面选择提交文件,提交到uploadImage.acti...
    99+
    2023-05-31
    struts2 st
  • Java如何实现多文件上传功能
    这篇文章主要为大家展示了“Java如何实现多文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java如何实现多文件上传功能”这篇文章吧。文件上传是开发中十分常见的功能,在servlet...
    99+
    2023-06-20
  • AjaxFileUpload如何实现单个文件的Ajax文件上传库
    这篇文章将为大家详细讲解有关AjaxFileUpload如何实现单个文件的Ajax文件上传库,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery.AjaxFileU...
    99+
    2022-10-19
  • Java实现多文件上传功能
    文件上传是开发中十分常见的功能,在servlet3.0之前,实现文件上传需要使用一些插件技术,比如: commons-fileupload smartupload ...
    99+
    2022-11-12
  • java如何实现单文件与多文件上传功能
    小编给大家分享一下java如何实现单文件与多文件上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!java 文件上传(单文件与多文件)一、简述一个javaWe...
    99+
    2023-05-30
    java
  • SpringBoot如何实现单文件与多文件上传功能
    这篇文章将为大家详细讲解有关SpringBoot如何实现单文件与多文件上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.单文件上传首先创建一个Spring Boot项目,并添加spring-boo...
    99+
    2023-06-26
  • Struts2 控制文件上传下载功能实例代码
    之前介绍servlet3.0新特性的时候有提到过servlet API提供了一个part类来实现对文件的上传和保存,Struts其实是在其基础上做了进一步的封装,更加简单易用。至于文件下载,Struts贯彻AOP 思想,在下载之前提供对用户...
    99+
    2023-05-31
    struts2 上传 下载
  • SpringBoot实现单文件与多文件上传功能
    目录1.单文件上传2.多文件上传1.单文件上传 首先创建一个Spring Boot项目,并添加spring-boot-starter-web依赖 然后创建一个upload.jsp文件...
    99+
    2022-11-12
  • asp.net如何使用ajaxFileUpload插件上传文件
    这篇文章主要讲解了“asp.net如何使用ajaxFileUpload插件上传文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“asp.net如何使用ajaxFileUpload插件上传文件...
    99+
    2023-06-22
  • 如何实现js上传文件功能
    这篇文章给大家分享的是有关如何实现js上传文件功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下一、用input完成上传,效果图如   ...
    99+
    2022-10-19
  • JavaWeb如何实现上传文件功能
    本篇内容主要讲解“JavaWeb如何实现上传文件功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaWeb如何实现上传文件功能”吧!这是需要使用到的两个jar包一定要导入到lib目录中,并...
    99+
    2023-07-02
  • Netty如何实现文件上传功能
    这篇文章主要讲解了“Netty如何实现文件上传功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Netty如何实现文件上传功能”吧!今天我们来完成一个使用netty进行文件传输的任务。在实际...
    99+
    2023-06-20
  • SpringBoot如何实现文件上传功能
    这篇文章主要介绍了SpringBoot如何实现文件上传功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。经典的文件上传服务器处理上传文件一般都是先在请求中读取文件信息,然后改...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作