首页 web前端 js教程 AjaxFileUpload+Struts2实现多文件上传功能

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

May 21, 2018 pm 05:22 PM
上传 功能

这篇文章主要介绍了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"> 
    <h2> 
      多文件上传 
    </h2> 
    <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=&#39;25&#39;>"+fileNames[i]+ 
              "</td><td><a href=&#39;downloadFile?downloadFilePath="+filePaths[i]+"&#39;>下载</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;  
  /** 
   * 文件上传 
   * @return 
   */ 
  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"; 
  } 
  /** 
   * 文件下载 
   * @return 
   */ 
  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; 
  } 
  /** 
   * 省略set get方法 
   */ 
}
登录后复制

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>
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

利用ajax提交form表单到数据库详解(无刷新)

基于Ajax和forms组件实现注册功能(含有代码)

ajax 实现微信网页授权登录的方法(图文教程)

以上是AjaxFileUpload+Struts2实现多文件上传功能的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

豆包app有什么功能 豆包app有什么功能 Mar 01, 2024 pm 10:04 PM

豆包app里会有很多ai创作的功能,那么豆包app有什么功能呢?用户们可以通过这个软件来创作绘画,和ai进行聊天,还能够为用户生成文章,帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法,下面就是具体内容,赶紧看看吧!豆包app有什么功能答:可以绘画、聊天、写文、找歌。功能介绍:1、问题查询:可以通过ai来更快的找到问题的答案,什么样的问题都是可以询问。2、图片生成:可以有ai来为大家创建不同的图片,只需要告诉大家大概的要求。3、ai聊天:能够为用户们创建一个可以聊天的ai,

vivox100s和x100区别:性能对比及功能解析 vivox100s和x100区别:性能对比及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手机都是vivo手机产品线中的代表机型,它们分别代表了vivo在不同时间段内的高端技术水平,因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较,帮助消费者更好地选择适合自己的手机。首先,我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的

对比分析JPA和MyBatis的功能和性能 对比分析JPA和MyBatis的功能和性能 Feb 19, 2024 pm 05:43 PM

JPA和MyBatis:功能与性能对比分析引言:在Java开发中,持久化框架扮演着非常重要的角色。常见的持久化框架包括JPA(JavaPersistenceAPI)和MyBatis。本文将对这两个框架的功能和性能进行对比分析,并提供具体的代码示例。一、功能对比:JPA:JPA是JavaEE的一部分,提供了一种面向对象的数据持久化解决方案。它通过注解或X

自媒体到底是什么?它的主要特点和功能有哪些? 自媒体到底是什么?它的主要特点和功能有哪些? Mar 21, 2024 pm 08:21 PM

随着互联网的快速发展,自媒体这个概念已经深入人心。那么,自媒体到底是什么?它有哪些主要特点和功能呢?接下来,我们将一一探讨这些问题。一、自媒体到底是什么?自媒体,顾名思义,就是自己就是媒体。它是指通过互联网平台,个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体,如报纸、电视、电台等,自媒体具有更强的互动性和个性化,让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些?1.低门槛:自媒体的崛起降低了进入媒体行业的门槛,不再需要繁琐的设备和专业的团队,一部手

蓝牙适配器的用途是什么? 蓝牙适配器的用途是什么? Feb 19, 2024 pm 05:22 PM

蓝牙适配器是干什么的随着科技的不断发展,无线通信技术也得到了快速的发展和普及。其中,蓝牙技术作为一种短距离无线通信技术,广泛地应用于各种设备之间的数据传输和连接。而蓝牙适配器则是作为支持蓝牙通信的重要设备,扮演着至关重要的角色。蓝牙适配器是一种能够将非蓝牙设备变为支持蓝牙通信的设备。它通过将无线信号转换为蓝牙信号,实现设备之间的无线连接和数据传输。蓝牙适配器

如何在QQ音乐上传歌词 如何在QQ音乐上传歌词 Feb 23, 2024 pm 11:45 PM

随着数字化时代的到来,音乐平台成为人们获取音乐的主要途径之一。然而,有时候我们在听歌的时候,发现没有歌词是一件十分困扰的事情。很多人都希望在听歌的时候能够显示歌词,以便更好地理解歌曲的内容和情感。而QQ音乐作为国内最大的音乐平台之一,也为用户提供了上传歌词的功能,使得用户可以更好地享受音乐的同时,感受到歌曲的内涵。下面将介绍一下在QQ音乐上如何上传歌词。首先

酷狗上传自己的音乐的简单步骤 酷狗上传自己的音乐的简单步骤 Mar 25, 2024 pm 10:56 PM

1、打开酷狗音乐,点击个人头像。2、点击右上角设置的图标。3、点击【上传音乐作品】。4、点击【上传作品】。5、选择歌曲,然后点击【下一步】。6、最后点击【上传】即可。

小红书账号管理软件有哪些功能?怎么经营小红书账号? 小红书账号管理软件有哪些功能?怎么经营小红书账号? Mar 21, 2024 pm 04:16 PM

随着小红书在年轻人中的流行,越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中,我们将讨论一些小红书账号管理软件的功能,并探讨如何更好地经营小红书账号。随着社交媒体的发展,许多人发现自己需要管理多个社交账号。对于小红书用户来说,这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号,包括自动发布内容、定时发布、数据分析等功能。通过这些工具,用户可以更高效地管理他们的账号,提高账号的曝光率和关注度。另一、小红书账号管理软件有

See all articles