你的位置:首页 > Java教程

[Java教程]chunkupload文件上传断点续传组件(java)


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.

 

1 <servlet>2   <servlet-name>ChunkUpload</servlet-name>3   <servlet-class>com.iyangyuan.chunkupload.servlet.DispatcherServlet</servlet-class>4 </servlet>5 <servlet-mapping>6   <servlet-name>ChunkUpload</servlet-name>7   <url-pattern>/chunkupload/*</url-pattern>8 </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="http://www.cnblogs.com//static/lib/dawn/dawn.js"></script> 67   <script src="http://www.cnblogs.com//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 上传进度回调

 

      目前项目基本完成,注释详尽,发布指日可待~