webUploader实现大文件上传
webUploader实现大文件上传
- upload.html
- java后台处理代码
upload.html
/*
*
* */
var $list = $('#fileList'); // 页面展示的文件列表
var md5File;
//监听分块上传过程中的时间点
WebUploader.Uploader.register({
"before-send-file":"beforeSendFile", // 整个文件上传前
"before-send":"beforeSend", // 每个分片上传前
"after-send-file": "afterSendFile" // 分片上传完毕
},{
//时间点1：所有分块进行上传之前调用此函数 ，检查文件存不存在
beforeSendFile:function(file){
var deferred = WebUploader.Deferred();
md5File = hex_md5(file.name+file.size);//根据文件名称，大小确定文件唯一标记，这种方式不赞成使用
$.ajax({
type:"POST",
url:"/files/checkFile",
data:{
md5File: md5File, //文件唯一标记
},
async: false, // 同步
dataType:"json",
success:function(response){
if(response){ //文件存在，跳过 ，提示文件存在
$('#' + file.id).find('p.state').text("file exist");
}else{
deferred.resolve(); //文件不存在或不完整，发送该文件
}
}
} , function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
deferred.resolve();
} );
return deferred.promise();
},
//时间点2：如果有分块上传，则每个分块上传之前调用此函数 ，判断分块存不存在
beforeSend:function(block){
var deferred = WebUploader.Deferred();
$.ajax({
type:"POST",
url:"/files/checkChunk",
data:{
md5File: md5File, //文件唯一标记
chunk:block.chunk, //当前分块下标
},
dataType:"json",
success:function(response){
if(response){
deferred.reject(); //分片存在，跳过
}else{
deferred.resolve(); //分块不存在或不完整，重新发送该分块内容
}
}
}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
deferred.resolve();
});
return deferred.promise();
},
//时间点3：分片上传完成后，通知后台合成分片
afterSendFile: function (file) {
var chunksTotal = Math.ceil(file.size / (5*1024*1024));
if (chunksTotal >= 1) {
//合并请求
var deferred = WebUploader.Deferred();
$.ajax({
type: "POST",
url: "/files/merge",
data: {
name: file.name,
md5File: md5File,
chunks: chunksTotal
},
cache: false,
async: false, // 同步
dataType: "json",
success:function(response){
if(response){
$('#' + file.id).find('p.state').text('upload success');
$('#' + file.id).find('.progress').fadeOut();
}else{
$('#' + file.id).find('p.state').text('merge error');
deferred.reject();
}
}
})
return deferred.promise();
}
}
});
var uploader = WebUploader.create({
auto: false,// 选完文件后，是否自动上传。
formdata:{
"token" : localStorage.getItem("token")
},
swf: '../../webuploader/Uploader.swf',// swf文件路径
server: '/files/upload',// 文件接收服务端。
chunked:true,//开启分片上传
chunkSize:5*1024*1024,//5M
chunkRetry: 3,//错误重试次数
pick : {
id : '#filePicker', // 选择文件的按钮
multiple : true // 允许同时选择多个文件
},
});
//上传添加参数
uploader.on('uploadBeforeSend', function (obj, data, headers) {
data.md5File=md5File;
});
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( ' '+
'- ' +
'等待上传' +
'取消上传' +
file.name +
'' +
'' +
''+
'
'+
'
');
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('' +
'' +
'').appendTo( $li ).find('.progress-bar');
}
$li.find('p.uploadState').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
// 手动上传
$("#btnUpload").click(function() {
// 执行上传操作
uploader.upload();
});
java后台处理代码
/*
* **************************************************如下处理webuploader ，分片上传************************************************************/
/**
* @author van
* 检查文件存在与否
*/
@PostMapping("/checkFile")
@ResponseBody
public Boolean checkFile(@RequestParam(value = "md5File") String md5File) {
Boolean exist = false;
//实际项目中，这个md5File唯一值，应该保存到数据库或者缓存中，通过判断唯一值存不存在，来判断文件存不存在，这里我就不演示了
/*if(true) {
exist = true;
}*/
return exist;
}
/**
* @author van
* 检查分片存不存在
*/
@PostMapping("/checkChunk")
@ResponseBody
public Boolean checkChunk(@RequestParam(value = "md5File") String md5File,
@RequestParam(value = "chunk") Integer chunk) {
Boolean exist = false;
String path = filesPath+"/"+md5File+"/";//分片存放目录
String chunkName = chunk+ ".tmp";//分片名
File file = new File(path+chunkName);
if (file.exists()) {
exist = true;
}
return exist;
}
/**
* @author van
* 修改上传
*/
@PostMapping("/upload")
@ResponseBody
public Boolean upload(@RequestParam(value = "file") MultipartFile file,
@RequestParam(value = "md5File") String md5File,
@RequestParam(value = "chunk",required= false) Integer chunk) { //第几片，从0开始
try {
fileService.saveChunk(file,md5File,chunk);
}catch (Exception e){
return false;
}
return true;
}
/**
* @author van
* 合成分片
*/
@PostMapping("/merge")
@ResponseBody
public Boolean merge(@RequestParam(value = "chunks",required =false) Integer chunks,
@RequestParam(value = "md5File") String md5File,
@RequestParam(value = "name") String name) throws Exception {
FileOutputStream fileOutputStream = new FileOutputStream(filesPath+"/"+name); //合成后的文件
try {
byte[] buf = new byte[1024];
for(long i=0;i这个版本文件上传还是不是很快，如果想要更快，更完全的代码，可以留言，我每天都会上博客，就给你解决了。