chunkupload文件上传断点续传组件(java)
编程爱好者联盟 2016-09-25
chunkupload简介
chunkupload是一款基于java语言的断点续传组件，针对文件上传，非文件下载，集成方便，使用简单。
从整体上讲，chunkupload会对文件进行切片处理，每个切片4M大小，默认情况下，chunkupload不会对切片进行合并，笔者也不建议在上传文件时对切片进行合并，虽然chunkupload支持这项操作。
对于客户端(浏览器)而言，chunkupload组件会在客户端计算文件MD5，为了尽可能提高计算效率，chunkupload在客户端脚本中使用了web worker，因此，客户端兼容性会受到较为严重的影响。
对于服务端而言，通过文件MD5+文件大小，唯一确定一个文件，并且基于文件MD5前6位，每两位作为一级目录，自动生成分散的目录结构，假如文件MD5为[071287fffa974b878732a7a17858be36]，那么生成的目录结构如下：[自定义的rootpath] + [/07/12/87/] +[文件MD5+文件长度]。文件目录下的文件结构如下图：
其中，文件信息中包含：文件状态(是否上传完成)、文件MD5、文件大小、切片数量、每一个切片的序号+MD5信息。
目前chunkupload通过servlet实现与浏览器的交互，完成了基于浏览器的断点续传，实际上，使用者完全可以调用chunkupload核心类库自行操作文件，比如切片合并操作。
总的来说，chunkupload具有如下特性：
· 实现断点续传。
· 对于同一个文件，允许多用户上传，并且上传的用户越多，上传越快。
· 线程安全。
· 进程安全(同一物理机，非集群环境)。
由于chunkupload目前还处于测试阶段，过多的技术细节，笔者说多了也是白费，为了不做井底之蛙，公布chunkupload有如下几个期望：
· 确定当前的模式是否符合大众需求。
· 确定是否有可能用于生产环境。
· 确定是否存在潜在的不可行因素。
· 积极改进chunkupload。
总之，希望大家能给我一些建议，笔者水平有限，希望chunkupload最终能成为一个优秀的开源项目。
感受一下chunkupload使用方法
服务端
引用chunkupload.jar包，chunkupload.jar无任何第三方依赖。
在项目web.xml中配置chunkupload servlet。
<servlet>
<servlet-name>ChunkUpload</servlet-name>
<servlet-class>com.iyangyuan.chunkupload.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ChunkUpload</servlet-name>
<url-pattern>/chunkupload/*</url-pattern>
</servlet-mapping> 客户端(浏览器)
引用dawn.js，用于计算文件MD5，dawn.js算是chunkupload的一个附属项目。
引用chunkupload.js，用于与服务端进行交互，chunkupload.js核心思想是只关注交互，不关注具体UI展现，因为各个产品UI不尽相同，chunkupload.js不对UI做过多限制、干扰。
无任何第三方依赖。
1 <html>
2 <head>
3 <title>ChunkUpload 文件上传示例</title>
4 <meta charset="utf-8">
5 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
6 <style>
7 body{
8 font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
9 }
10 body > div {
11 width: 200px;
12 margin: 20px auto 0 auto;
13 }
14 body > div.form {
15 text-align: center;
16 }
17 body > div.form > input {
18 margin-top: 12px;
19 border: 1px dashed #dcdcdc;
20 padding: 4px 8px;
21 cursor: pointer;
22 background-color: transparent;
23 color: #686868;
24 font-family: inherit;
25 outline: none;
26 }
27 body > div.form > input.button {
28 font-size: 15px;
29 line-height: 29px;
30 padding: 0 10px;
31 }
32 body > div.form > input:hover {
33 background-color: #f5f5f5;
34 }
35 div.info > div{
36 margin: auto;
37 height: 31px;
38 width: 88px;
39 background: url('data:image/gif;base64,R0lGODlhWAAfAMMBAAAAAP////XcoPDLdfTboP+dzv+z2f+AwP9brfPZoAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAKACwAAAAAWAAfAAAE/xDISau9OOvNd/hgKI5kaZ5oWkqB4L5wLM90bd+4PLB57//A2g7QChqPyNiwmGw6c8undKrj/STULC3qAxQAMKw0IUiYyy6yWf3j5rwGsMsrd5JfdzQelre5bxIFcROCdUBneWx6aHd9UFY1hAaTAJQTRo6LfYl8i0KQMoGCk6Slg0FsnGmdq3uZSpBiAnCmtaWGqK4yiq2eVURzwbS2pBK3hzabezOvLlxyYMPEg5aXWk1uWNLTxaOU10lR2oHckwcHlIWn4Ed/c97ECOfocJWy7EDus/C28udx8HAlaZYP1ItttRAgKEYBGS9NelL10LevnC2BR1RhM3iwAD9uGE5/NBvpg+IcLx5BhvTxiiDBGSYPivJI0xo+JzHfZfjyxNHDGC9/MaFhb0bRmzg5hoqE9EnOpk2XDJhKtarVq1izat3KtSvWDmDDih0LNgIAIfkEBRQACgAsAwAGADEAFgAABJ9QyEmrBMDqzbsFRTZh3pacZQUaogC2qZRQc4oVLLbCaS2XOpyBNdTxYjPf5iYcOp+kmCfqaj6vUClHlFlhr5is9nOpfsGAonGs6lrPUOvR1r3BnYdDEZemskdvWAh5ejs5fyqBV4N5LHKIiXcGCAhORnMmAkoUXpJgkEsFimeYPVsgond+oEtMoq86rJpTIZdBpbIjLBp9spu8W7nCshEAIfkEBRQACgAsAwAFADoAFgAABLdQyEmrAMDqzWXySdhZQJFN2KhS30oWxnmZrtp++IrB2B7XNmAPZogVezKgJidobXbEonSaUjaZE2erOpt6vz+gk5VFSTIlsBdDFTffnRM6qo4Bjkirbl4Hp6VJHTdxaD59BgcHRzx2ei5/dQiJiml3XI5xdGCSiTF0gZhPml8ICIB5oSqQh22pjwWjdaAuOWNjJCWwfZeuWoS5sME9rh4VtxolSMo0vXqWyGHESyOzZ9LHx9LaAhEAIfkEBRQACgAsAgAFAEQAFgAABMtQyEmrvTjrmmT63VYBgGieVIhSQFFO5CpPYWefrfEK7T5fto+g9iMVdKSc75dqOlWZ5NGgoyaXK6HqNvR4vxbjlEoux2ZQcHrL2uXK8DhWdGODo5LSO24GmJlqXSIvemN8Vn5ISVkaaRgxe4dwkXOAGpBGkmQHB1ZHfmeWRYZ8CJydSkiiTJGlpzqGlauDpHEICGRXsrMbrZq5THVPXcJhBbWSu2g0MmLIucona4BSx9YuoaKOzBbbMNi6RtHaRToXoLyO3nfneLw/EQAh+QQFFAAKACwCAAUASwAXAAAE3lDISau9OOtdE/9gKI4aAJDo5qUSUJyTyVJeYgtrfeesa8ACF5C1khSLuEkNZSr8TL4haKdMWpM8o/YDdRp+X6iUg9xer2VR0/ttu2Wh5bFKP5eAPrd+P55W00t2FjAneXtvAG9xGkhzHIRBbIdhiU9QM5gxhZKTb5J9mSAyXZ1tBwdhTolwoZiGkwinqFFPrZmvh7GnP5+haTSinHsICG1ioBdywFo8WRu4pcaZjslqBcKdyGQYv2ZcLtelrCS/3YKia9fql7btgy/HXdofZYHVTD8Xq+78FMjz/TBEAAA7') no-repeat center center;
40 padding: 2px;
41 box-sizing: border-box;
42 }
43 div.info > div > p{
44 text-align: right;
45 font-size: 12px;
46 margin: 0;
47 }
48 </style>
49 </head>
50 <body>
51 <!-- 表单部分 -->
52 <div class="form">
53 <input id="bigFile" type="file" placeholder="选择一个文件" />
54 <input id="execBtn" class="button" type="button" value="上传" />
55 </div>
56 <!-- 上传进度展示 -->
57 <div class="info">
58 <div>
59 <!-- 提示文本 -->
60 <p id="text"></p>
61 <!-- 执行进度 -->
62 <p id="progress"></p>
63 </div>
64 </div>
65 </body>
66 <script src="/static/lib/dawn/dawn.js"></script>
67 <script src="/static/lib/chunkupload/chunkupload.js"></script>
68 <script>
69 var fileInput = document.getElementById("bigFile"),
70 execBtn = document.getElementById("execBtn"),
71 text = document.getElementById("text"),
72 progress = document.getElementById("progress");
73
74 execBtn.addEventListener("click", function(e) {
75 var file, cu;
76 file = fileInput.files[0];
77 cu = new ChunkUpload(file);
78 cu.upload({
79 "success": function(block){
80 /**
81 * 上传成功后，会返回一个block对象
82 * 通过block对象，可以在一定程度上管理文件，目前支持：
83 * 获取文件信息(参见info_example.html)
84 * 删除文件(参见delete_example.html)
85 */
86 text.innerText = "上传完成";
87 },
88 "error": function(e){
89 text.innerText = e;
90 progress.innerText = "";
91 },
92 "md5Progress": function(n){
93 text.innerText = "计算MD5";
94 progress.innerText = n + "%";
95 },
96 "uploadProgress": function(n){
97 text.innerText = "正在上传";
98 progress.innerText = n + "%";
99 }
100 });
101 });
102 </script>
103 </html> 通过以下四个回调，与UI进行交互，完成文件上传。
·success上传成功回调
·error 异常回调
·md5Progress MD5计算进度回调
·uploadProgress 上传进度回调
目前项目基本完成，注释详尽，发布指日可待~
