首先简短解释下断点续传的原理：
客户端选取文件，通过webuploader进行MD5然后进行分片，每一个分片均需要进行上传前检查(检查当前分片时候已经上传)，如果没有上传就开始进行上传，最后在上传完成之后会调用一个合并的操作，在后台将所有分片依次合并，按照指定文件名生成文件。
1.准备工作：
1)前端使用jquery(jquery-1.10.2.js)，webuploader插件(webuploader-0.1.5)
2)后台准备 springMvc(使用注解，配置requestMapping)
3)开发环境 jsp,MyEclipse 1.0
2.开发步骤：
1）集成springMvc，此处步骤相对简单(可按照: http://www.jianshu.com/p/0ccaa4af05fc)。
2）导入jquery , webuploader，编写前台页面，代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/root/comm/jsp/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>断点续传</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${ctx}/root/comm/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx}/root/comm/webuploader-0.1.5/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/root/comm/webuploader-0.1.5/webuploader.css">
<script type="text/javascript">
// 监听分块上传的时间点，断点续传
var fileMd5; //保存文件MD5名称
var uploader; //全局对象uploader
WebUploader.Uploader.register(
{"before-send-file" : "beforeSendFile", //文件上传之前执行
"before-send" : "beforeSend", //文件块上传之前执行
"after-send-file" : "afterSendFile", //上传完成之后执行
},
{
//时间点1：所有进行上传之前调用此函数
beforeSendFile : function(file) {
var deferred = WebUploader.Deferred();
// 计算文件的唯一标识，用于断点续传和妙传
(new WebUploader.Uploader()).md5File(file, 0,
10 * 1024 * 1024).progress(
function(percentage) {
$("#" + file.id).find("span.state").text("正在获取文件信息...");
}).then(
function(val) {
fileMd5 = val;
$("#" + file.id).find("span.state").text("成功获取文件信息");
// 放行
deferred.resolve();
});
return deferred.promise();
},
//每一个分块发送之前执行该操作,检查当前块是否已经上传
beforeSend : function(block) {
var deferred = WebUploader.Deferred();
$.ajax({
type : "POST",
url : "${ctx}/system/upload/testUploadMergeUploadFile.htm?action=checkChunk",
data : {
//文件唯一标记
fileMd5 : fileMd5,
//当前分块下标
chunk : block.chunk,
//当前分块大小
chunkSize : block.end - block.start
},
dataType : "json",
success : function(response) {
if (response.ifExist) {
//分块存在，跳过
deferred.reject();
} else {
//分块不存在或不完整，重新发送该分块内容
deferred.resolve();
}
}
});
this.owner.options.formData.fileMd5 = fileMd5;
return deferred.promise();
},
afterSendFile : function(file) {
// 通知合并分块
$.ajax({
type : "POST",
url : "/RenWei/system/upload/testUploadMergeUploadFile.htm?action=mergeChunks",
data : {
'fileMd5' : fileMd5
},
success : function(response) {
var $li = $('#' + file.id);
$li.find('p.state').text('上传完成');
$("#ctlBtn").addClass('disabled');
}
});
}
});
$(function() {
// 上传基本配置
uploader = WebUploader.create({
swf : "${ctx}/root/comm/webuploader-0.1.5/Uploader.swf",
server : '${ctx}/system/upload/testUploadSaveFile.htm',
pick : "#filePicker",
auto : false,
// 分块上传设置
// 是否分块
chunked : true,
// 每块文件大小（默认5M）
chunkSize : 10 * 1024 * 1024,
// 开启几个并非线程（默认3个）
threads : 1,
// 在上传当前文件时，准备好下一个文件
formData : { //这里可以自定义属性，在后台全部都可以接收
fileMd5 : fileMd5
},
prepareNextFile : true
});
// 选中文件之后触发
uploader.on("fileQueued", function(file) {
// 把文件信息追加到fileList的div中
$("#fileList").append(
'<div id="' + file.id + '" class="item">'
+ '<h4 class="info">' + file.name + '</h4>'
+ '<p class="state">等待上传...</p>' + '</div>');
//md5计算
uploader.md5File(file).progress(function(percentage) {
console.log('Percentage:', percentage);
})
// 完成
.then(function(md5File) { // 完成
fileMd5 = md5File;
$('#' + file.id).find('p.state').text('MD5计算完毕，可以点击上传了');
$("#ctlBtn").removeClass('disabled');
});
});
// 监控上传进度
// percentage:代表上传文件的百分比
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('#' + file.id);
$li.find('p.state').text('上传中 '+Math.round(percentage * 100) + '%');
});
$("#ctlBtn").on('click', function() {
if ($(this).hasClass('disabled')) {
alert("请选择文件或等待文件生成MD5完成。");
return false;
}
uploader.options.formData['fileMd5'] = fileMd5;
uploader.upload();
});
});
</script>
</head>
<body>
<!-- 2.创建页面元素 -->
<div id="upload">
<div id="fileList"></div>
<div id="filePicker" style="float: left;">选择文件</div>
<button id="ctlBtn" class="btn btn-default disabled" style="padding: 8px 15px;">开始上传</button>
<div class="statusBar" style="display: none;">
<div class="progress">
<span class="text">0%</span> <span class="percentage"></span>
</div>
<div class="info"></div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------华丽的分割线--------------------------------------------------
至此前台代码已经完成：
3)开始编写后台代码:
@Controller
@RequestMapping("/system/upload")
public class TestUpload {
String serverPath = "d:\\"; //临时目录
/*
* 保存文件,数据块
*/
@SuppressWarnings("unchecked")
@RequestMapping("testUploadSaveFile.htm")
public void saveFile(HttpServletRequest request,
HttpServletResponse response) {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List<FileItem> items = upload.parseRequest(request);
UploadUtil.saveChunkData(items);
} catch (FileUploadException e) {
e.printStackTrace();
}
}
//合并上传文件
@RequestMapping("testUploadMergeUploadFile.htm")
public void mergeUploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进入合并后台...");
String action = request.getParameter("action");
String saveFilePath = ConfigUtil.getInstance().getProValue("saveChunkFilePath");
String fileMd5 = request.getParameter("fileMd5");
if("mergeChunks".equals(action)){
UploadUtil.mergeUploadFile(saveFilePath, fileMd5);
}
else if("checkChunk".equals(action)){
// 当前分块下标
String chunk = request.getParameter("chunk");
// 当前分块大小
String chunkSize = request.getParameter("chunkSize");
String yesOrNoFlag = UploadUtil.checkChunk(saveFilePath+"/"+fileMd5, chunk, chunkSize);
if(yesOrNoFlag.equals("1")){
response.getWriter().write("{\"ifExist\":"+yesOrNoFlag+"}");
}
else{
response.getWriter().write("{\"ifExist\":"+yesOrNoFlag+"}");
}
}
}
}
具体的上传方法我已经抽象出来了(上述代码中的UploadUtil.mergeUploadFile(saveFilePath, fileMd5）,UploadUtil.saveChunkData(items)）两个方法。
)，
代码如下：
哟，抽象出来的还是放在附件中了（UploadUtil.java），这样大家想用的话直接复制就好。^_^^_^^_^^_^^_^
好了，到目前未知我们所有的工作都已经完成了，就可以直接将代码发布在中间件上，直接查看方才编写的
jsp了。
正常情况下都是可以上传成功的，并且有进度条显示上传的进度。
如果不成功的话，可参照一下步骤检查：
1.WebUploader.Uploader.register （1.2.3） 三个方法必须放置在最前边，且不能放置在$(function(){...})
中，都则1.2.3三个方法不生效，原因是作用域链问题。
2.同一个分片多次上传仍然覆盖问题，每一个分片检查完成之后的放行，阻断方法问题，deferred.reject();
deferred.resolve(); 主要是deferred 延迟对象在检查完成之后不管结果全部放行。解决方案： 严格按照我代码中的写法，就没有问题。
最后如果还有什么问题，比如发现代码中逻辑错误，不够严谨，都可以直接联系我，
微信： ma0603kang
相关推荐
2. **分片上传**：对于大文件，WebUploader可以将其切割成多个小块进行上传，这样即使在网络不稳定的情况下，也能通过断点续传保证文件完整上传。 3. **进度显示**：在上传过程中，WebUploader可以实时显示每个文件...
WebUploader是百度推出的一款强大的文件上传...总的来说，这个百度WebUploader的demo提供了一个全面的示例，涵盖了大文件上传、断点续传和分片等关键技术，对于想要学习或实施此类功能的开发者来说，是一个宝贵的资源。
minio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片上传Demo.zipminio分片...
通过异步上传机制，WebUploader能够实现多文件并发上传，并支持文件的分片和断点续传，极大地提升了用户体验。 二、核心功能特性 1. **多文件选择**：用户可以一次性选择多个文件进行上传。 2. **文件预览**：支持...
总的来说，webUploader是一个强大且灵活的前端文件上传工具，通过深入研究其源码和示例，开发者可以更好地掌握文件上传技术，提升Web应用的功能和用户体验。同时，遇到问题时，参考其他开发者的经验和解决方案也是...
【标题】"webuploader单页面多个上传demo"是关于如何在一个网页中利用WebUploader组件实现多处文件上传功能的示例。WebUploader是由百度开发的一个轻量级且功能强大的JavaScript上传组件，它支持多浏览器环境，包括...
1. **WebUploader组件**：WebUploader是一款基于HTML5 File API的前端文件上传组件，可以处理各种类型的文件上传，包括图片、视频等。其特点是支持断点续传、多文件上传、拖拽上传、预览等功能，适用于现代浏览器...
这个"webupload demo webuploader实例"的压缩包很可能是为了展示如何在实际项目中使用WebUploader进行文件上传操作。下面，我们将深入探讨WebUploader的核心功能、工作原理以及如何通过示例来实现文件上传。 1. ...
1.上传存放视频目录为了测试 直接777 2.fileupload.php 给执行权限 3.finfo_open 需要php环境支持二进制，我用的lnmp组合套件是直接支持二进制，没有的自行百度解决哦。 4.很多网上的fileupload.php文件，切片上传...
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。 3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也...
在开发Web应用时，尤其是涉及用户上传大文件的场景，如视频分享网站，经常会遇到大文件上传的问题。...开发者需要理解分片上传的原理，熟悉ThinkPHP的控制器机制，以及Webuploader的前端操作，才能实现这一功能。
本示例"vue大文件上传的demo案例"专注于展示如何在Vue环境中实现大文件的分片上传，并能与不同的文件存储系统如fastdfs和Minio进行集成。 首先，我们要理解“分片上传”的概念。当文件过大，一次性上传可能会导致...
本资源“web前端开发常用布局demo”提供了一系列常用的布局模式，供开发者在实际项目中参考和应用。以下是对这些布局技术的详细介绍： 1. **流式布局（Fluid Layout）** 流式布局是一种根据浏览器窗口大小自适应...
以上就是“webuploader MVC 切片上传-断点续传-秒传Demo”的核心知识点，这种技术不仅提高了大文件上传的效率，还增强了系统的稳定性和用户体验。在实际项目中，结合WebUploader与其他MVC框架，如ASP.NET MVC、...
【web前端demo】是一个关于前端开发的示例项目，它主要展示了如何构建一个简单的博客网站。这个demo旨在帮助初学者理解和实践Web前端开发的基本技术，同时也适用于有一定经验的开发者进行快速原型设计。在这个项目中...
在前端开发中，上传和下载功能是不可或缺的部分，尤其在现代Web应用中，用户交互往往涉及到文件的交换。"最全前端上传和下载Demo.rar"这个压缩包很可能包含了一系列示例，旨在帮助开发者理解并实现这些功能。让我们...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
百度baidu前端开发组开源项目webuploader，旨在为开发者免费提供开源的文件上传组件，但baidu提供出来的demo只有php版本，本实例为ASP.NET\DOTNET\C#.NET的DEMO，专门为大家提供分享！
sip通讯前端demo(基于FreeSwitch)
`WebUploader`是一个基于`jQuery`的文件上传组件，它提供了强大的文件选取、预览、上传进度显示等功能，尤其适合处理大文件。`SpringBoot`则是一款轻量级的Java开发框架，用于快速构建高效、模块化的Web应用，其内建...