以前有介绍过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. 私人定制javascript中函数小知识点

    函数的定义 首先在javascript中,函数就是对象,程序可以随意操控它们.比如,可以给它们设置属性,甚至调用它们的方法.函数使用function关键字来定义.它既可以用在函数定义表达式,也可以用在 ...

  2. —软测试—(5)计算机系统CPU组成

    事实上,我们不得不很早就接触到电脑系统的知识,但仍然会出现不起眼,现象清醒的认识,非常严重丢分. 要我们花功夫去理解,由于非常多东西我们接触不到,比方校验码.码制等.假设你不去理解而是去记,就非常难參 ...

  3. 【百度地图API】——国内首款团购网站的地图插件

    原文:[百度地图API]--国内首款团购网站的地图插件 摘要: 本文介绍了一款应用在团购网站上的地图插件,适用于目前非常流行的团购网站.使用这款地图插件,无需任何编程技术,你就把商家的位置轻松地标注在 ...

  4. Excel 删除所有错误公式

    当前工作表的话可以F5-定位-公式-错误值 来选中所有含错误值的单元格,然后按delete删除. 多表的话没办法了,因为不能跨工作表多重选中,只能一页页的删,或者用vba编个宏来解决

  5. C#特性和反射

    C#特性和反射 .NET编译器的任务之一就是为所有定义和引用的类型生成元数据描述.除了程序集中标准的元数据外,.NET平台还支持特定(attribute)把更多的元数据嵌入到程序集中. .NET特性扩 ...

  6. BZOJ 2120 色彩数 暴力

    标题效果:给定一个序列,两种操作: 1.询[l,r]间隔多少个不同的号码 2.单点变化 n,m<=1W 树盖树?树董事长?因此不必! 暴力之前,这个问题2s,不想复杂!适当的水太! 离散化一下! ...

  7. java23种设计模式详解(转)

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  8. asp.net mvc3 数据验证(三)—自定义数据注解

    原文:asp.net mvc3 数据验证(三)-自定义数据注解         前两节讲的都是asp.net mvc3预先设定的数据注解,但是系统自由的数据注解肯定不适合所有的场合,所以有时候我们需要 ...

  9. Asp.Net MVC页面静态化功能实现一:利用IHttpModule,摒弃ResultFilter

    上一篇有提到利用IHttpModule和ResultFilter实现页面静态化功能.后来经过一些改动,将ResultFilter中要实现的功能全部转移到IHttpModule中来实现 Asp.Net ...

  10. 在线web编辑器

    真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...