接着上一篇，实现多个大文件的断点续传。
前端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 $chunkSize = 10*1024*1024, // 分片尺寸 10M
$maxSingleSize = 1024*1024*1024, // 单文件最大尺寸
$maxSize = 10*1024*1024*1024; // 所有文件最大尺寸
var $list = $('#fileList'), // 页面展示的文件列表
$fileArray = new Array(), // 要上传的文件列表
$md5Array = new Array(), // 文件的MD5
$nameArray = new Array(), // 文件名称
count = 0, // 正在上传的文件在上传列表中的位置
uploader; // Web Uploader实例
// 监听分块上传的三个事件
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile", // 所有分块上传之前
"before-send" : "beforeSend", // 每个分块上传之前
"after-send-file" : "afterSendFile" // 所有分块上传完成后
},{
beforeSendFile : function(file){
var deferred = WebUploader.Deferred();
// 计算文件的MD5
(new WebUploader.Uploader()).md5File(file,0,10*1024*1024)
// 及时显示进度
.progress(function(percentage) {})
// 计算完成，继续下一步
.then(function(val) {
$md5Array.push(val);
$nameArray.push(file.name);
deferred.resolve();
});
return deferred.promise();
},
beforeSend : function(block){
var deferred = WebUploader.Deferred();
// 每个分块上传之前校验是否已上传
var url = "${ctx}/uploadBig/check",
param = {
fileName : $nameArray[count],
fileMd5 : $md5Array[count],
chunk : block.chunk,
chunkSize : block.end - block.start
};
// 同步校验，防止没校验完就上传了
$.ajaxSetup({async : false});
$.post(url,param,function(data){
// 已上传则跳过，否则继续上传
if(1 == data){
deferred.reject();
}else{
deferred.resolve();
}
});
$.ajaxSetup({async : true});
this.owner.options.formData.fileMd5 = $md5Array[count];
deferred.resolve();
return deferred.promise();
},
afterSendFile : function(){
// 所有分块上传完毕，通知后台合并分块
var url = "${ctx}/uploadBig/merge",
// 上传前设置其它参数
param = {
fileMd5 : $md5Array[count],
fileName : $nameArray[count]
};
$.ajaxSetup({async : false});
$.post(url,param,function(data){
count++;
if(count<=$fileArray.length-1){
uploader.upload($fileArray[count].id);
}
});
$.ajaxSetup({async : true});
}
});
// 初始化Web Uploader PS:IE使用的flash上传，真心慢，大文件还是用Chrome上传比较靠谱
uploader = WebUploader.create({
auto : false, // 手动上传
swf : '${ctx}/js/webuploader-0.1.5/Uploader.swf',
server : '${ctx}/uploadBig/upload', // 文件接收服务端
threads : 1, // 只运行1个线程传输
duplicate : false, // 是否重复上传（单次选择同样的文件）
prepareNextFile : true, // 允许在文件传输时提前把下一个文件准备好
chunked : true, // 是否要分片处理大文件上传
chunkSize : $chunkSize, // 如果要分片，分多大一片？ 10M默认大小为5M
fileNumLimit : 10, // 文件总数量
fileSingleSizeLimit : $maxSingleSize, // 单个文件大小限制
fileSizeLimit : $maxSize, // 文件总大小限制
pick : {
id : '#filePicker', // 选择文件的按钮
multiple : true // 允许同时选择多个文件
},
compress: false, // 不压缩文件
accept : {
// TODO:待确认上传文件的格式和大小
// 常见视频文件格式：avi,wmv,mpeg,mp4,mov,mkv,flv,f4v,m4v,rmvb,rm,3gp,dat,ts,mts,vob
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) {
if((file.size <= $chunkSize) || (file.size > $maxSingleSize)){
return;
}
var $li = $('<div id="' + file.id + '" class="file-item">'
+ '<span class="info">' + file.name + '</span>'
+ '<span class="state">等待上传</span>'
+ '</div>');
$list.append($li);
$fileArray.push(file);
});
// 对于太小的文件进行提示
uploader.on('filesQueued',function (files){
var smallFiles = '';
for(i=0;i<files.length;i++){
var name = files[i].name,
size = files[i].size;
if(size <= $chunkSize){
smallFiles += name + ','
}
}
var msg = '';
if(''!=smallFiles){
msg += "文件" + smallFiles + "小于10M,";
}
if('' != msg){
msg+="系统不支持上传这些文件!";
showTipsMsg(msg,3000,3);
return;
}
});
// 上传中
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('');
$fileArray = new Array();
$md5Array = new Array();
$nameArray = new Array();
count = 0;
uploader.reset();
});
});
</script>
</body>
</html>
后端Controller
import java.io.File;
import java.io.FileFilter;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.alibaba.fastjson.JSON;
@Controller
@RequestMapping(value = "/uploadBig")
public class BigFileUploadController extends BaseController {
/** 日志记录 */
private static Logger logger = Logger.getLogger(BigFileUploadController.class);
/**
* 保存文件分片
* @param request HttpServletRequest
* @param response HttpServletResponse
*/
@RequestMapping(value = "/upload",
method = RequestMethod.POST)
public void upload(HttpServletRequest request, HttpServletResponse response) {
// 参数获取
String fileName = request.getParameter("name");
String fileMd5 = request.getParameter("fileMd5");
String chunk = request.getParameter("chunk");
SysUser user = getSysUser(request);
// 临时目录
String tempPath = FilePathUtil.getRootTempPath();
// 转换请求对象得到文件对象
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> files = Murequest.getFileMap();
if (null != files && !files.isEmpty()) {
for (MultipartFile item : files.values()) {
String tempDir = getTempDir(tempPath, user.getUserName(), fileName, fileMd5);
// 创建临时文件夹
File dir = new File(tempDir);
if (!dir.exists()) {
dir.mkdirs();
}
// 创建分片文件并保存
File chunkFile = new File(tempDir + File.separator + chunk);
try {
chunkFile.createNewFile();
item.transferTo(chunkFile);
} catch (IllegalStateException e) {
logger.error("保存分片文件出错：" + e.getMessage());
e.printStackTrace();
} catch (IOException e) {
logger.error("保存分片文件出错：" + e.getMessage());
e.printStackTrace();
}
}
}
}
/**
* 校验分片是否已上传
*
* @Title: checkChunk
* @param request HttpServletRequest
* @param response HttpServletResponse
*/
@RequestMapping(value = "/check",
method = RequestMethod.POST)
public void checkChunk(HttpServletRequest request, HttpServletResponse response) {
// 获取参数
String fileName = request.getParameter("fileName");
String fileMd5 = request.getParameter("fileMd5");
String chunk = request.getParameter("chunk");
String chunkSize = request.getParameter("chunkSize");
SysUser user = getSysUser(request);
// 临时文件
String tempPath = FilePathUtil.getRootTempPath();
String tempDir = getTempDir(tempPath, user.getUserName(), fileName, fileMd5);
File chunkFile = new File(tempDir + File.separator + chunk);
int result = 0;
// 分片文件是否存在，尺寸是否一致
if (chunkFile.exists() && chunkFile.length() == Integer.parseInt(chunkSize)) {
result = 1;
}
returnJSONData(response, JSON.toJSONString(result));
}
/**
* 合并分片成完整文件
*
* @Title: mergeChunks
* @param request HttpServletRequest
* @param response HttpServletResponse
*/
@SuppressWarnings("resource")
@RequestMapping(value = "/merge",
method = RequestMethod.POST)
public void mergeChunks(HttpServletRequest request, HttpServletResponse response) {
// 获取参数
String fileName = request.getParameter("fileName");
String fileMd5 = request.getParameter("fileMd5");
SysUser user = getSysUser(request);
// 获得目标文件夹
String savePath = FilePathUtil.getFilePath();
// 创建目标文件夹
File saveDir = new File(savePath);
if (!saveDir.exists()) {
saveDir.mkdirs();
}
// 文件临时文件夹"根目录/temp/userName/文件名/MD5"
String tempDirPath = getTempDir(FilePathUtil.getRootTempPath(), user.getUserName(), fileName, fileMd5);
File tempDir = new File(tempDirPath);
// 获得分片文件列表
File[] fileArray = tempDir.listFiles(new FileFilter() {
// 只需要文件
@Override
public boolean accept(File pathname) {
if (pathname.isDirectory()) {
return false;
} else {
return true;
}
}
});
// 转成集合进行排序后合并文件
List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));
Collections.sort(fileList, new Comparator<File>() {
// 按文件名升序排列
@Override
public int compare(File o1, File o2) {
if (Integer.parseInt(o1.getName()) < Integer.parseInt(o2.getName())) {
return -1;
} else {
return 1;
}
}
});
// 目标文件
File outfile = new File(savePath + File.separator + fileName);
try {
outfile.createNewFile();
} catch (IOException e) {
logger.error("创建目标文件出错：" + e.getMessage());
e.printStackTrace();
}
// 执行合并操作
FileChannel outChannel = null;
FileChannel inChannel;
try {
outChannel = new FileOutputStream(outfile).getChannel();
for (File file : fileList) {
inChannel = new FileInputStream(file).getChannel();
inChannel.transferTo(0, inChannel.size(), outChannel);
inChannel.close();
file.delete();
}
outChannel.close();
} catch (FileNotFoundException e) {
logger.error("合并分片文件出错：" + e.getMessage());
e.printStackTrace();
} catch (IOException e) {
logger.error("合并分片文件出错：" + e.getMessage());
e.printStackTrace();
}
// 删除临时文件夹 根目录/temp/userName/fileName
File tempFileDir = new File(
FilePathUtil.getRootTempPath() + File.separator + user.getUserName() + File.separator + fileName);
FileUtil.deleteDir(tempFileDir);
}
/**
* 获得分片文件临时保存路径
*
* @Title: getTempDir
* @param tempPath 临时文件根目录
* @param userName 用户名
* @param fileName 文件名
* @param fileMd5 文件MD5
* @return String 分片临时保存路径
*/
private String getTempDir(String tempPath, String userName, String fileName, String fileMd5) {
StringBuilder dir = new StringBuilder(tempPath);
dir.append(File.separator).append(userName);
dir.append(File.separator).append(fileName);
dir.append(File.separator).append(fileMd5);
return dir.toString();
}
}