这次给大家带来怎么用ajaxfileupload实现多文件上传，用ajaxfileupload实现多文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。
本文重点给大家介绍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='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 即可进行文件上传
如图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax和jsonp在项目中的实战总结
只需四步即可实现ajax发送异步请求
以上就是怎么用ajaxfileupload实现多文件上传的详细内容。