关键词：
参考技术A 本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：WebUploader是由Baidu
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接copy的解释)
功能描述
1、webuploader是百度研发的上传组件，文档不是特别规整，但是也够用了。
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。
3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。
4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。
5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果
关键代码前端
WebUploader.Uploader.register(
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
,
beforeSendFile:
function(file)
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
).then(function(val)
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
;
$.ajax(
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
file.statusText
=
'server_error';
task.reject();
).then(function(data,
textStatus,
jqXHR)
if(data.rtn
==
0)
if(data.obj
==
1)
file.statusText
=
'file_existed';
task.reject();
else
task.resolve();
else
task.reject();
);
);
return
task.promise();
,
beforeSend:
function(block)
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
;
$.ajax(
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json"
).then(function(data,
textStatus,
jqXHR)
if(data.rtn
==
0
&&
data.obj
==
1)
task.reject();
//
分片存在，则跳过上传
else
task.resolve();
);
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
);
//
实例化
uploader
=
WebUploader.create(
pick:
id:
'#filePicker',
label:
'点击选择文件'
,
formData:
uid:
123
,
dnd:
'#dndArea',
//指定文件拖拽的区域
paste:
'#uploader',
//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
,
//
禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上传的个数
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制单个文件的大小
50
M
);
后端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("$file.upload.path")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上传之前校验(整个文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
//
未分片校验
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
return
RETURN.success("文件已存在，跳过",
1);
else
return
RETURN.success("文件不存在",
0);
else
//
分片校验
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
return
RETURN.success("分片已存在，跳过",
1);
else
return
RETURN.success("分片不存在",
0);
/**
*
文件上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
//
没有分片
return
UnChunkUpload(file,
uploadVO);
else
//
分片
return
ChunkUpload(file,
uploadVO);
/**
*
分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
当前片
Long
chunks
=
uploadVO.getChunks();//
总共多少片
//
分片目录创建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
chunkDir.mkdirs();
//
分片文件上传
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
file.transferTo(chunkFile);
catch
(Exception
e)
LOG.error("分片上传出错",
e);
return
RETURN.fail("分片上传出错",
1);
//
合并分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
try
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
catch
(IOException
e)
LOG.error("分片合并失败：",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合并失败",
1);
if
(chunk
==
chunks
-
1)
//
删除分片文件夹
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上传成功",
1);
else
return
RETURN.fail("上传中...",
1);
/**
*
未分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上传
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
//
上传目录
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
fileDir.mkdirs();
if
(destFile.exists())
destFile.delete();
try
file.transferTo(destFile);
return
RETURN.success("上传成功",
0);
catch
(Exception
e)
LOG.error("文件上传出错",
e);
return
RETURN.fail("文件上传出错",
0);
return
RETURN.fail("上传失败",
0);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二）webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuery
webuploader分片上传大文件
大文件分片上传(代码片段)
Vue项目中遇到了大文件分片上传的问题，之前用过webuploader，索性就把Vue2.0与webuploader结合起来使用，封装了一个vue的上传组件，使用起来也比较舒爽。上传就上传吧，为什么搞得那么麻烦，用分片上传？分片与并发结合，将一... 查看详情
大文件分片上传的实现前后台完整版(代码片段)
...止上传请求超时，导致上传失败。这时候可能将视频分片上传可以对你的项目有一个小小的体验优化。本片文章前端是vue，后台基于PHP进行的分片上传，需要的小伙伴可以借鉴。分片上传1、什么是分片上传分片上传&#... 查看详情
webuploader的demo怎样导入css文件
WebUploader通过准备dom结构、初始化、显示用户选择、文件上传进度、提示信息实现导入JS,CSS,SWF资源。WebUploader的demo导入css等资源的流程：WebUploader概述：WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代... 查看详情
webuploader+php视频分片上传
...件上传的原理和使用BaiduWebFE(FEX)团队开发的文件上传插件WebUploader。利用前端框架WebUploader配置进行对大文件的分片（由Baidu官方测试，每5M一个分片是效率最高的），这里，我的服务端是php，所以需要修改php.ini里面的post_max_size... 查看详情
jfinal+webuploader实现图片的异步上传(代码片段)
关于WebUploader##WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。界面友好，使用方便，稍作修改，可快速上手。官网：http://fex.baidu.com/webuploader/如何使用webuploader到官... 查看详情
阿里云oss文件上传（分片上传断点续传）前后端实现(代码片段)
转载地址：https://segmentfault.com/a/1190000020963346 关于阿里云OSS的介绍请参考官方文档：阿里云OSS。出于账号安全的考虑，前端使用OSS服务需要走临时授权，即拿一个临时凭证（STSToken）去调用aliyun... 查看详情
阿里云oss文件上传（分片上传断点续传）前后端实现(代码片段)
转载地址：https://segmentfault.com/a/1190000020963346 关于阿里云OSS的介绍请参考官方文档：阿里云OSS。出于账号安全的考虑，前端使用OSS服务需要走临时授权，即拿一个临时凭证（STSToken）去调用aliyun... 查看详情
浏览器大文件分片上传处理
...系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标... 查看详情
前端+后端实现分片上传（断点续传/极速秒传）(代码片段)
...大文件/视频前后端（java）代码前端+后端实现分片上传（断点续传/极速秒传）前端slice分片上传，后端用表记录分片索引和分片大小和分片总数，当接受完最后一个分片（分片索引等于分片总数... 查看详情
你好，我用webuploader.html5only.min.js实现批量图片上传，我该怎么在action中获取上传的那些文件呢？
参考技术A1.1分片、并发分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度... 查看详情
webuploader的demo怎样导入css文件？
...-><linkrel="stylesheet"type="text/css"href="webuploader/webuploader.css">WebUploader文件上传首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。初始化WebUploader。显示用户选择框。文件上传进... 查看详情
使用webuploader实现图片上传(代码片段)
...inkrel="stylesheet"type="text/css"href="js/webuploader-0.1.5/webuploader.css"><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/webuploader-0.1.5/webuploa... 查看详情
使用webuploader和servlet实现文件上传
...POST请求封装成Part，通过Part对上传的文件进行操作。3、WebUploader参照网上教程实现。4、引入webuploader.css、webuploader.js、Uploader.swfupload.jsp: < 查看详情
基于.netcore+jquery实现文件断点分片上传(代码片段)
基于.NETCore+Jquery实现文件断点分片上传前言该项目是基于.NETCore和Jquery实现的文件分片上传，没有经过测试，因为博主没有那么大的文件去测试，目前上传2G左右的文件是没有问题的。使用到的技术Redis缓存技术Jqueryajax请求技术... 查看详情
文件各种上传，离不开的表单
...ormData）分片上传使用HTML5 拖拽、粘贴上传上传插件（WebUploader）总结作为程序员的我们，经常会要用到文件的上传和下载功能。到了需要用的时候，各种查资料。有木有..有木有...。为了方便下次使用，这里来做个总结和备... 查看详情
webuploader文件图片上传插件的使用(代码片段)
最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader//初始化WebUploader***上传图片 varuploader=WebUploader.create( //选完文件后，是否自动上传。 ... 查看详情
springboot实现分片上传断点续传大文件极速秒传-备忘(代码片段)
...传体验呢，答案有的，就是下边要介绍的几种上传方式1.分片上传1.1什么是分片上传 分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为Part）来进行分别上传，上传完之后再由服... 查看详情
jsp使用webuploader上传excelmysql导入导出apache-poi(代码片段)
文章目录jsp使用webuploader上传excelmysql导入导出apache-poi目标效果大致思路代码utilexcelUtilDBUtilservletDownloadServletJDBCServletLog4jServletuploadServletserviceanddaoExcelServiceExcelServiceImplExcelDaoExcelDaoImpljspadd.jspdata.jsplist.jspjsp使用webuploader上传excelmysql... 查看详情