PM要做一个文件上传的Web需要支持大文件断点续传，调查了一下决定使用Baidu的WebUploader控件实现。
1、多图片上传
前端JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html style="height: 99%; width: 99.9%">
<head>
<title>文件上传</title>
<link rel="stylesheet" href="${ctx}/js/webuploader-0.1.5/webuploader.css" />
<script src="${ctx}/js/jquery-ui-1.11.1/jquery-ui.min.js"></script>
<script src="${ctx}/js/webuploader-0.1.5/webuploader.js"></script>
</head>
<body class="div-form-container">
<table class="upload">
<tbody>
<tr>
<td height="200px">
<div id="uploader-container" style="width: 100%">
<div id="fileList" class="uploader-list">
</div>
<div id="upInfo"></div>
<div id="filePicker">选择文件</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="button" class="btnSave" id="btnUpload" value="上传"/>
<input type="button" class="btnSave" id="btnReset" value="重置"/>
<input type="button" class="btnSave" value="取消" onclick="javascript:closeDialog();"/>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
var $maxSingleSize = 10*1024*1024, // 单个文件最大10M
$maxSize = 10081024*1024; // 所有文件最大100M
var $list = $('#fileList'),
uploader; // Web Uploader实例
// 初始化Web Uploader
uploader = WebUploader.create({
auto : false, // 手动上传
swf : '${ctx}/js/webuploader-0.1.5/Uploader.swf',
server : '${ctx}/fileUpload/upload', // 文件接收服务端
threads : 3, // 同时运行3个线程传输
duplicate : false, // 是否重复上传（单次选择同样的文件）
fileNumLimit : 10, // 文件总数量
fileSingleSizeLimit : $maxSingleSize, // 单个文件大小限制 10M
fileSizeLimit : $maxSize, // 文件总大小限制 100M
pick : {
id : '#filePicker', // 选择文件的按钮
multiple : true // 允许可以同时选择多个文件
},
compress : false, // 不压缩文件
accept : {
extensions: "txt,gif,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx",
mimeTypes: '.txt,.gif,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx',
}
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function(file) {
var $li = $('<div id="' + file.id + '" class="file-item">'
+ '<span class="info">' + file.name + '</span>'
+ '<span class="state">等待上传</span>'
+ '</div>');
$list.append($li);
});
// 上传中
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id);
var $state = $li.find('span.state');
$state.html("<font color='#330033'>上传中...</font>");
});
// 文件上传成功
uploader.on('uploadSuccess', function(file, response) {
var $li = $('#' + file.id);
var $state = $li.find('span.state');
$state.html("<font color='green'>上传成功！</font>");
});
// 文件上传失败
uploader.on('uploadError', function(file, code) {
var $li = $('#' + file.id);
var $state = $li.find('span.state');
$state.html("<font color='red'>上传失败！</font>");
});
// 手动上传
$("#btnUpload").click(function() {
// 执行上传操作
uploader.upload();
});
// 重置
$("#btnReset").click(function() {
// 清空文件列表，重置上传控件
$list.html('');
uploader.reset();
});
});
</script>
</body>
</html>
后端Controller
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
@RequestMapping(value = "/fileUpload")
public class FileUploadController extends BaseController {
/** 日志记录 */
private static Logger logger = Logger.getLogger(FileUploadController.class);
/**
* 保存上传文件
*
* @Title: upload
* @Description: 保存前端使用Webuploader未进行分片处理上传的文件
* @param request HttpServletRequest
* @param response HttpServletResponse
* @param session HttpSession
*/
@RequestMapping(value = "/upload")
public void upload(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
// 获得文件保存目录
String savePath = ""; // 这里是你要保存文件的目录
// 转换请求对象得到文件对象
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> files = Murequest.getFileMap();
String fileName;
File tagetFile;
// 获得文档保存目录
File dir = new File(savePath);
if (!dir.exists()) {
dir.mkdirs();
}
// 保存文档
for (MultipartFile file : files.values()) {
fileName = file.getOriginalFilename();
// 创建文件对象
tagetFile = new File(savePath + File.separator + fileName);
// 目标文件创建
if (!tagetFile.exists()) {
try {
tagetFile.createNewFile();
} catch (IOException e) {
logger.error("创建目标文件时出错：" + e.getMessage());
e.printStackTrace();
}
}
// 保存文件
try {
file.transferTo(tagetFile);
} catch (IllegalStateException e) {
logger.error("复制时出错：" + e.getMessage());
e.printStackTrace();
} catch (IOException e) {
logger.error("复制时出错：" + e.getMessage());
e.printStackTrace();
}
}
}
}