以前有介绍过ajaxFileUpload实现文件上传,但那是单文件的,这次介绍多文件上传。

单文件上传参考:http://blog.csdn.net/itmyhome1990/article/details/23187087

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

一是插件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='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; /**
* 文件上传
* @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>

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

如图:

项目源码下载:http://download.csdn.net/detail/itmyhome/7584519

转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/36396291

ajaxFileUpload+struts2实现多文件上传的更多相关文章

  1. ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...

  2. Struts2 之 实现文件上传和下载

    Struts2  之 实现文件上传和下载 必须要引入的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar 01.文件上传需要分别在struts.xm ...

  3. [转]Struts2多个文件上传

    转载至:http://blog.csdn.net/hanxiaoshuang123/article/details/7342091 Struts2多个文件上传多个文件上传分为List集合和数组,下面我 ...

  4. 笨鸟先飞之Java(一)--使用struts2框架实现文件上传

    无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...

  5. Struts2 之 实现文件上传(多文件)和下载

    Struts2  之 实现文件上传和下载 必须要引入的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar 01.文件上传需要分别在struts.xm ...

  6. 4.struts2中的文件上传,下载

    Struts2中文件的上传下载,是借用commons里面的包实现文件的上传,需要导入两个jar commons-fileupload-1.2.2.jar commons-io-2.0.1.jar 实现 ...

  7. struts2 笔记02 文件上传、文件下载、类型转换器、国际化的支持

    Struts2的上传 1. Struts2默认采用了apache commons-fileupload  2. Struts2支持三种类型的上传组件 3. 需要引入commons-fileupload ...

  8. android和struts2实现android文件上传

    1.开发准备如下2个工具类 package org.lxh.util; import java.io.BufferedReader; import java.io.InputStreamReader; ...

  9. Struts2实现单文件上传

    首先配置一下web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi ...

随机推荐

  1. POJ 2586 Y2K Accounting Bug(枚举洪水问题)

    Y2K Accounting Bug Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10674   Accepted: 53 ...

  2. java_Eclipse自动生成作者、日期注释等功能设置_导入 xml方式

    常规方式 随便百度个 类比 http://blog.sina.com.cn/s/blog_4080505a0101guoh.html 这里主要介绍配好后,导出,xml,迁移环境时 导入 comment ...

  3. 关于”机器学习方法“,&quot;深度学习方法&quot;系列

    "机器学习/深度学习方法"系列,我本着开放与共享(open and share)的精神撰写,目的是让很多其它的人了解机器学习的概念,理解其原理,学会应用.如今网上各种技术类文章非常 ...

  4. [Android]Parcelable encountered IOException writing serializable object (name = xxx)

    Activity之间通过Intent传递值,支持基本数据类型和String对象及它们的数组对象byte.byte[].char.char[].boolean.boolean[].short.short ...

  5. 关于WebBrowser.DocumentCompleted事件

    原文:关于WebBrowser.DocumentCompleted事件 今天发现使用WebBrowser时载入一个页面后DocumentCompleted事件会被调用2次,后来发现这两次WebBrow ...

  6. NodeJS,我对“高、高、非”的一些看法

    ·众所周知 NodeJS三大神器"事件驱动,V8,回调函数". ·事件驱动,故名思议:等快递和收快递区别.NodeJS将原先大牛们掌握的神神秘秘的EPOLL走向大众化,这点是最大的 ...

  7. MySQL 升级方法指南大全

    原文:MySQL 升级方法指南大全 通常,从一个发布版本升级到另一个版本时,我们建议按照顺序来升级版本.例如,想要升级 MySQL 3.23 时,先升级到 MySQL 4.0,而不是直接升级到 MyS ...

  8. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 文件夹

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 文件夹 第一部分--開始使用SharePoint 2013 第1章节--SharePoint 2013 介绍 逐渐了解Sh ...

  9. JS中的模块规范(CommonJS,AMD,CMD)

    JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...

  10. leetcode[158] Read N Characters Given Read4 II - Call multiple times

    想了好一会才看懂题目意思,应该是: 这里指的可以调用更多次,是指对一个文件多次操作,也就是对于一个case进行多次的readn操作.上一题是只进行一次reandn,所以每次返回的是文件的长度或者是n, ...