最近项目遇到大文件上传出现超时情况,Google了下发现百度旗下提供了webuploader(官网:http://fex.baidu.com/webuploader/ )文件上传插件很不错。采用大文件切割上传的方法。原理就是把大文件切割用多线程上传,然后后台进行文件合并,很方便。下面说实现过程。参考过网上前辈的一些经验再结合自己的实际。下面直接贴代码
1、简单的文件上传
- 前端页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../js/webuploader.css" ></link>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/webuploader.js"></script>
</head>
<body>
<!-- 2.创建页面元素 -->
<div id="upload">
<div id="thelist" class="uploader-list"></div>
<div id="filePicker">文件上传</div>
</div>
<!-- 3.添加js代码 -->
<script type="text/javascript">
var fileArray = [];
var guid = WebUploader.Base.guid();
var uploader = WebUploader.create(
{
swf:"../js/Uploader.swf",
server:"/file/saveUpload",
pick:"#filePicker",
auto:true, // 分块上传设置
// 是否分块
chunked:true,
// 每块文件大小(默认5M)
chunkSize:5*1024*1024,
// 开启几个并非线程(默认3个)
threads:3,
// 在上传当前文件时,准备好下一个文件
prepareNextFile:true,
formData:{"guid":guid}
}
);
//点击上传之前调用的方法
uploader.on("uploadStart", function (file) {
var paramOb = {"guid": guid, "filedId": file.source.ruid}
uploader.options.formData.guid = guid;
fileArray.push(paramOb);
});
//文件成功、失败处理
uploader.on('uploadSuccess', function (file) {
// var successDuid = file.source.ruid;
var chunks = file.blocks.length;
var realFileName = file.name;
var folder = file.id;
$.post("/file/merge", {"guid": guid,"chunks":chunks,"realFileName":realFileName,"folder":folder}, function (data, status) {
alert("文件上传成功!")
});
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
</script>
</body>
</html>
- 后端代码
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import java.io.*;
import java.util.Map;
@Slf4j
@Controller
@RequestMapping(value = "/file")
public class BigFileController {
@RequestMapping(value = "/upload", method = RequestMethod.GET)
public String upload(Map<String, Object> model) {
return "upload";
}
@RequestMapping(value = "/uploadSimple", method = RequestMethod.GET)
public String uploadSimple(Map<String, Object> model) {
return "uploadSimple";
}
@RequestMapping(value = "saveUpload")
@ResponseBody
public void upload(MultipartHttpServletRequest request) {
String guid = request.getParameter("guid");
MultiValueMap<String, MultipartFile> multiFileMap = request.getMultiFileMap();
MultipartFile multipartFile = multiFileMap.getFirst("file");
try {
InputStream in = multipartFile.getInputStream();
String chunk = request.getParameter("chunk")==null?"0":request.getParameter("chunk");
String path = "D:\\bigFile" + File.separator + request.getParameter("id")+File.separator+guid;
File exist = new File(path);
if (!exist.exists()) {
exist.mkdirs();
}
OutputStream out = new FileOutputStream(path + File.separator + chunk + "_" + request.getParameter("name"));
byte[] bytes = new byte[1024];
int len = -1;
while ((len = in.read(bytes)) != -1) {
out.write(bytes, 0, len);
}
out.close();
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 文件合并
* @param guid
* @param realFileName
* @param chunks
* @param folder
*/
@RequestMapping(value = "merge",method = RequestMethod.POST)
@ResponseBody
public void merge(String guid,String realFileName,int chunks,String folder ) {
String path = "D:\\bigFile"+File.separator+folder+File.separator+guid;
try {
FileOutputStream fileOutputStream = new FileOutputStream(path+File.separator+realFileName);
byte[] buf = new byte[1024];
for(int i=0;i<chunks;i++){
File tempFile = new File(path+File.separator+i+"_"+realFileName);
InputStream inputStream = new FileInputStream(tempFile);
int len = 0;
while((len=inputStream.read(buf))!=-1){
fileOutputStream.write(buf,0,len);
}
inputStream.close();
//删除临时文件
tempFile.delete();
}
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
- 页面效果
2、完善的文件上传
2.1. 前端页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../js/webuploader.css" ></link>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/webuploader.js"></script>
</head>
<body>
<!-- 2.创建页面元素 -->
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="filePicker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
<!-- 3.添加js代码 -->
<script type="text/javascript">
var fileArray = [];
var guid = WebUploader.Base.guid();
var $list = $("#thelist");
var $btn = $("#ctlBtn");
var timer;
var state = 'pending'; // 上传文件初始化
var uploader = WebUploader.create({
// swf文件路径
swf:"../js/Uploader.swf",
// 文件接收服务端。
server:"/file/saveUpload",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
chunked:true,
duplicate: true,
// 每块文件大小(默认5M)
chunkSize:5*1024*1024,
// 开启几个并非线程(默认3个)
threads:3,
// 在上传当前文件时,准备好下一个文件
prepareNextFile:true,
formData:{"guid":guid}
});
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>' );
});
//点击上传之前调用的方法
uploader.on("uploadStart", function (file) {
var paramOb = {"guid": guid, "filedId": file.source.ruid}
uploader.options.formData.guid = guid;
fileArray.push(paramOb);
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
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) {
// var successDuid = file.source.ruid;
var chunks = file.blocks.length;
var realFileName = file.name;
var folder = file.id;
clearInterval(timer);
$.post("/file/merge", {"guid": guid,"chunks":chunks,"realFileName":realFileName,"folder":folder}, function (data, status) {
// alert("文件上传成功!")
});
$( '#'+file.id ).find('p.state').text('已上传');
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
$btn.on('click', function () {
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
timer = setInterval(function () {
var useTime = parseInt($("#useTime").html());
useTime = useTime + 1;
$("#useTime").html(useTime);
}, 1000);
}
});
</script>
</body>
</html>
2.2.后端代码
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import java.io.*;
import java.util.Map;
@Slf4j
@Controller
@RequestMapping(value = "/file")
public class BigFileController {
@RequestMapping(value = "/upload", method = RequestMethod.GET)
public String upload(Map<String, Object> model) {
return "upload";
}
@RequestMapping(value = "/uploadSimple", method = RequestMethod.GET)
public String uploadSimple(Map<String, Object> model) {
return "uploadSimple";
}
@RequestMapping(value = "saveUpload")
@ResponseBody
public void upload(MultipartHttpServletRequest request) {
String guid = request.getParameter("guid");
MultiValueMap<String, MultipartFile> multiFileMap = request.getMultiFileMap();
MultipartFile multipartFile = multiFileMap.getFirst("file");
try {
InputStream in = multipartFile.getInputStream();
String chunk = request.getParameter("chunk")==null?"0":request.getParameter("chunk");
String path = "D:\\bigFile" + File.separator + request.getParameter("id")+File.separator+guid;
File exist = new File(path);
if (!exist.exists()) {
exist.mkdirs();
}
OutputStream out = new FileOutputStream(path + File.separator + chunk + "_" + request.getParameter("name"));
byte[] bytes = new byte[1024];
int len = -1;
while ((len = in.read(bytes)) != -1) {
out.write(bytes, 0, len);
}
out.close();
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 文件合并
* @param guid
* @param realFileName
* @param chunks
* @param folder
*/
@RequestMapping(value = "merge",method = RequestMethod.POST)
@ResponseBody
public void merge(String guid,String realFileName,int chunks,String folder ) {
String path = "D:\\bigFile"+File.separator+folder+File.separator+guid;
try {
FileOutputStream fileOutputStream = new FileOutputStream(path+File.separator+realFileName);
byte[] buf = new byte[1024];
for(int i=0;i<chunks;i++){
File tempFile = new File(path+File.separator+i+"_"+realFileName);
InputStream inputStream = new FileInputStream(tempFile);
int len = 0;
while((len=inputStream.read(buf))!=-1){
fileOutputStream.write(buf,0,len);
}
inputStream.close();
//删除临时文件
tempFile.delete();
}
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
2.3.展示效果
注意:如果进度条不显示,很多情况下应该是样式的问题。覆盖下webuploader.css的样式即可。
webuploader.css样式代码如下
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
/display: inline-block;/
cursor: pointer;
background: #047a0a;
padding: 5px 8px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #047a0a;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
/**/
element.style {
opacity: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
background: rgb(255, 255, 255);
}
picker {
display: inline-block;
line-height: 1.428571429;
position: relative;
top: 12px;
}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.wu-example:after {
content: "示例";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.upload-state-done:after {
content:"示例";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: 0;
right: 4px;
color: #4cae4c;
z-index: 99;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #d14 url(progress.png) repeat-x;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@-moz-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-striped .progress-bar {
background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;
}
.progress-bar {
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
}
.progress-bar {
float: left;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
transition: width .6s ease;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
background-repeat: repeat-x;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
user-select: none;
}