zoukankan      html  css  js  c++  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.xml中配置chunkupload servlet。

    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="/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 上传进度回调

          目前项目基本完成，注释详尽，发布指日可待~
  • 相关阅读:
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Navicat查询哪些表有指定字段名
  • 原文地址：https://www.cnblogs.com/iyangyuan/p/5906296.html
Copyright © 2011-2022 走看看