今天做了一个多文件上传的页面，运用的是layui前端框架，后面是找了好多都没找到java的代码，记得以前写过一次ajaxfileupload实现无刷新上传文件，拿过来试了一下，完美适配，下面直接贴代码。ajaxfileupload的代码有空会补一篇。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<blockquote class="layui-elem-quote">为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。</blockquote>
<!--
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>高级应用：制作一个多文件列表</legend>
</fieldset>
-->
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
<script src="<%=basePath%>layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
upload.render({ //允许上传的文件后缀
elem: '#test4'
,url: '/upload/'
,accept: 'file' //普通文件
,exts: 'zip|rar|7z' //只允许上传压缩文件
,done: function(res){
console.log(res)
}
});
//设定文件大小限制
upload.render({
elem: '#test7'
,url: '/upload/'
,size: 60 //限制文件大小，单位 KB
,done: function(res){
console.log(res)
}
});
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/LayUiUpload'
// ,size: 60 //限制文件大小，单位 KB
,accept: 'image/*'
,data:{'ID':277} //可放扩展数据 key-value
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
</script>
</body>
</html>官网的例子非常全，去掉其他的，只留下了多文件上传，要说一下就是data传参好像不行，或者是我不知道怎么接收，下面是上传页面
下面是java后台代码
package service.atlas.control;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.gexin.fastjson.JSONObject;
import common.App;
public class LayUiUpload extends HttpServlet {
// 保存文件的目录
private static String PATH_FOLDER = "/";
// 存放临时文件的目录
private static String TEMP_FOLDER = "/";
/**
* Constructor of the object.
*/
public LayUiUpload() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public synchronized void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 结果json对象
JSONObject jsonobj = new JSONObject();
int returnTag = -1;
String saveName=null;
//上传的文件名
String filename=null;
String id = request.getParameter("ID");
System.out.println("id============="+id);
try {
System.out.println("==========以下为上传代码============");
request.setCharacterEncoding("utf-8"); // 设置编码
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
// 获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以
* .tem 格式的 然后再将其真正写到 对应目录的硬盘上
*/
factory.setRepository(new File(TEMP_FOLDER));
// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factory.setSizeThreshold(1024 * 1024);
// 高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
// 提交上来的信息都在这个list里面
// 这意味着可以上传多个文件
// 请自行组织代码
List<FileItem> list = upload.parseRequest(request);
// 获取上传的文件
for (FileItem file : list) {
FileItem item = file;
// 获取文件名
filename = getUploadFileName(item);
System.out.println("获取的文件名============================"
+ filename);
String suffix = filename
.substring(filename.lastIndexOf(".") + 1);
System.out
.println("获取的文件后缀名=========================" + suffix);
String[] regular = { "JPG", "GIF","PNG","JPEG" ,"BMP"};
boolean flag = false;
// 判断文件格式是否合法
for (String str : regular) {
if (suffix.equalsIgnoreCase(str)) {
flag = true;
}
}
if (!flag) {
returnTag = 0;
throw new Exception("文件格式不合法！");
}
// 保存后的文件名
saveName = new Date().getTime()
+ filename.substring(filename.lastIndexOf("."));
// 保存后图片的浏览器访问路径
String picUrl = App.UPLOAD_SAVE_IMG_URL+saveName;
System.out.println("存放目录:=================================="
+ PATH_FOLDER);
System.out.println("文件名:===================================="
+ filename);
System.out.println("浏览器访问路径:============================="
+ picUrl);
// 真正写到磁盘上
item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的
}
System.out.println("==========以上为上传代码=============");
if (returnTag != -1) {
// 请求失败
jsonobj.put("STATUS", "1");
} else {
jsonobj.put("code", 0);
}
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
} catch (Exception e) {
e.printStackTrace();
jsonobj.put("errorCode", 0);
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
}
}
private String getUploadFileName(FileItem item) {
// 获取路径名
String value = item.getName();
// 索引到最后一个反斜杠
int start = value.lastIndexOf("/");
// 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = value.substring(start + 1);
return filename;
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init(ServletConfig config) throws ServletException {
ServletContext servletCtx = config.getServletContext();
// 初始化路径
// 缩略图保存路径
PATH_FOLDER = "D:/source/aaa";
System.out.println("保存缩略图的目录===========" + PATH_FOLDER);
// 存放临时文件的目录,存放xxx.tmp文件的目录
TEMP_FOLDER = servletCtx.getRealPath("/temp");
System.out.println("存放临时文件的目录===========" + TEMP_FOLDER);
File dir = new File(PATH_FOLDER);
if (!dir.isDirectory()) {
dir.mkdir();
}
File dir2 = new File(TEMP_FOLDER);
if (!dir2.isDirectory()) {
dir2.mkdir();
}
}
}
写了一个样例，试了一下功能，细节还没改。