废话不多说，直接给出webuploader的配置。其实配置很简单，在官网上看看文档就行了。
var uploader = WebUploader.create({
auto: true,
swf: '${path }/admin/lib/webuploader/0.1.5/Uploader.swf',
// 文件接收服务端。
server: '${path}/edu/videoUpload',
pick: '#picker',
/*
accept:{
title: 'Videos',
extensions: 'mp4,flv,avi',
mimeTypes: 'video/*'
},
*/
chunked: true, //分片处理
chunkSize: 5 * 1024 * 1024, //每片5M
threads:1,//上传并发数。允许同时最大上传进程数。
disableGlobalDnd: true,
formData: {guid:"<%=UUID.randomUUID().toString()%>"}
});
uploader.on("fileQueued", function(file) {
/*
var fileName=file.name;
var videoTypes="mp4";
if(fileName.indexOf(videoTypes)<=0){
layer.msg("请上传MP4格式的视频...");
uploader.removeFile( file );
}else{
$("#fileList").append("<div id='" + file.id + "'><span>" + file.name + "</span><span style='margin-left:20px;' class='state'>上传中...</span><div><span class='percentage'><span></div></div>");
}*/
$("#fileList").append("<div id='" + file.id + "'><span>" + file.name + "</span><span style='margin-left:20px;' class='state'>上传中...</span><div><span class='percentage'><span></div></div>");
});
// 监控上传进度
// percentage:代表上传文件的百分比
uploader.on("uploadProgress", function(file, percentage) {
$("#" + file.id).find("span.percentage").text(Math.round(percentage * 100) + "%");
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
//$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on('uploadSuccess', function( file,response ) {
//alert("文件上传成功！");
//
$("#videoAddress").val(response.extend.videoAddress);
$("#videoOriginalname").val(response.extend.videoOriginalname);
$(".state").text("上传成功!");
//将提交按钮置为可用
$("#saveBtn").removeAttr("disabled");
//隐藏上传视频按钮
$("#picker").hide();
});
uploader.on( 'uploadError', function( file ) {
$(".state").text("上传失败");
});
uploader.on("error",function (type){
/*
if (type=="Q_TYPE_DENIED"){
layer.msg("请上传mp4格式文件");
}
*/
});
后台是ssm框架，controller是这样的：
@ResponseBody
@RequestMapping("/videoUpload")
public Msg videoUpload(MultipartFile file,String guid,Integer chunk,Integer chunks,HttpServletRequest request){
if(chunk==null&&chunks==null){//没有分片 直接保存
String filePath=FileUtils.fileUpload(file, request, Video_Path);
return Msg.success().add("videoAddress", filePath).add("videoOriginalname", file.getOriginalFilename());
}
//获取项目的根路径
String realpath=request.getSession().getServletContext().getRealPath("/");
//截取上传文件的类型
String fileType=FileUtils.getFileType(file.getOriginalFilename());
/* 下面用的两个静态变量
private static final String Temp_Video_Path="video/temp";
private static final String Video_Path="video";
*/
//根据guid 创建一个临时的文件夹
File file2=new File(realpath+Temp_Video_Path+"/"+guid+"/"+chunk+fileType);
if(!file2.exists()){
file2.mkdirs();
}
try {
//保存每一个分片
file.transferTo(file2);
} catch (Exception e) {
e.printStackTrace();
}
//如果当前是最后一个分片，则合并所有文件
if(chunk==(chunks-1)){
FileOutputStream fileOutputStream=null;
BufferedOutputStream bufferedOutputStream=null;
BufferedInputStream inputStream=null;
try {
Calendar now=Calendar.getInstance();
String videoAddress=Video_Path+"/"+now.get(Calendar.YEAR)+"/"+(now.get(Calendar.MONTH)+1)+"/"+now.get(Calendar.DAY_OF_MONTH)+"/"+FileUtils.getUUID()+fileType;
File video=new File(realpath+videoAddress);
//先判断文件的父目录是否存在，不存在需要创建；否则报错
if(!video.getParentFile().exists()){
video.getParentFile().mkdirs();
video.createNewFile();//创建文件
}
//创建流
fileOutputStream=new FileOutputStream(video, true);
//创建文件输入缓冲流
bufferedOutputStream=new BufferedOutputStream(fileOutputStream);
byte[] buffer = new byte[1024];//一次读取1024个字节
File tempFiles=new File(realpath+Temp_Video_Path+"/"+guid);
File [] files=tempFiles.listFiles();
//对这个文件数组进行排序
Arrays.sort(files, new Comparator() {
@Override
public int compare(File o1, File o2) {
int o1Index = Integer.parseInt(o1.getName().split("\\.")[0]);
int o2Index = Integer.parseInt(o2.getName().split("\\.")[0]);
if (o1Index > o2Index) {
return 1;
} else if (o1Index == o2Index){
return 0;
} else {
return -1;
}
}
});
for (int i = 0; i < files.length; i ++) {
File fileTemp=files[i];
inputStream = new BufferedInputStream(new FileInputStream(fileTemp));
int readcount;
while ((readcount = inputStream.read(buffer)) > 0) {
bufferedOutputStream.write(buffer, 0, readcount);
bufferedOutputStream.flush();
}
inputStream.close();
}
bufferedOutputStream.close();
//删除分块文件
//一个文件夹一起删了
for (int i = 0; i < files.length; i ++) {
files[i].delete();
}
tempFiles.delete();
/*
*/
return Msg.success().add("videoAddress", videoAddress).add("videoOriginalname", file.getOriginalFilename());
} catch (IOException e) {
e.printStackTrace();
}finally{
if(inputStream!=null){
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(fileOutputStream!=null){
try {
fileOutputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(bufferedOutputStream!=null){
try {
bufferedOutputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
return Msg.success("文件上传完但未合并！");
}
文件上传效果图是这样的
