webuploader 实现 断点续传

webuploader是百度开发的上传文件前端控件。可支持html5和flash,因此对浏览器的兼容比较好。因为需要用到ie8,ie8不支持html5,
所以必须支持flash上传。

断点续传原理:
1)将大分件分片上传,比如每次传送3m。
2)后台在上传完毕后将分片上传的文件合并为一个文件。

技术要求:
1)前端页面支持分件拆分读取。html5是支持的。IE早期版本不能支持,可以用flash来替代实现。

实现步骤:
1)页面接受用户传入文件。
2)页面用户点击“上传”。
3)页面将文件的基本信息发送到服务端,包括文件名称,大小,修改时间 或者 文件md5(文件md5可加载三方md5算法,但在前端获取需要花费大量时间),
   要求不是很高可以选第一种方案
4)服务端接受请求,根据md5生成目录。
5)页面将即将上传的分片信息(不是分片文件)上传到服务端请求验证,判断是否该分片是否已经上传,已经上传则该分片不再重复上传。
6)页面分片传送文件到服务端。
7)服务端将接受到的分片文件放置在md5目录下。
8)页面分片上传完毕,发送合并请求。
9)服务端接受合并请求,将文件合并后放置到指定目录,然后删除临时md5目录。
10)完毕。

实现方法:
js调用webuploader上传文件,配置为分片上传。
这样可以实现分片上传,但是如果要实现断点续传(比如昨天上传了一部分,关闭浏览器后,今天重新上传的情况),
还需要调用webupload提供的hook(WebUploader.Uploader.register)实现上传前,上传中,上传完成后的事件触发,发送到服务端请求。

代码框架概述:
// uploader 初始化
var uploader = new WebUploader.Uploader({
            // 选完文件后,是否自动上传。
            //auto: false,

            //runtimeOrder: flash,html5,  // 优先使用flash上传

            // swf文件路径
            swf: '/public/lib/webuploader/0.1.5/Uploader.swf',

            //是否要分片处理大文件上传。
            chunked: true,

            // 如果要分片,分多大一片? 默认大小为5M.
            chunkSize: chunkSize,

            // 如果某个分片由于网络问题出错,允许自动重传多少次?
            chunkRetry: 3,

            // 上传并发数。允许同时最大上传进程数[默认值:3]
            threads: 1,

            // 去重
            duplicate: true,

            // 文件接收服务端。
            server: server_url,

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: {
                id: filePicker,
                multiple: false
            },

            // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
            resize: false,

            // 上传本分片时预处理下一分片
            prepareNextFile: true,

            //formData: function(){return {uniqueFileName: '333'};}
            formData: {uniqueFileName: uniqueFileName}
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            // 具体逻辑...
        });

        // 文件上传成功处理。
        uploader.on('uploadSuccess', function (file, response) {
            // 具体逻辑...
        });
        // 文件上传失败处理。
        uploader.on('uploadError', function (file) {
            // 具体逻辑...
        });
        // 长传完毕,不管成功失败都会调用该事件,主要用于关闭进度条
        uploader.on('uploadComplete', function (file) {
            // 具体逻辑...
        });

/** 实现webupload hook,触发上传前,中,后的调用关键 **/
WebUploader.Uploader.register({
    "before-send-file": "beforeSendFile",  // 整个文件上传前
    "before-send": "beforeSend",           // 每个分片上传前
    "after-send-file": "afterSendFile"     // 分片上传完毕
}, {
    beforeSendFile: function (file) {        
        var task = new $.Deferred();
        var start = new Date().getTime();

        //拿到上传文件的唯一名称,用于断点续传
        uniqueFileName = md5(file.name + file.size);
        
        $.ajax({
            type: "POST",
            url: check_url,   // 后台url地址
            data: {
                type: "init",
                uniqueFileName: uniqueFileName,
            },
            cache: false,
            async: false,  // 同步
            timeout: 1000, //todo 超时的话,只能认为该文件不曾上传过
            dataType: "json"
        }).then(function (data, textStatus, jqXHR) {            
            if (data.complete) { //若存在,这返回失败给WebUploader,表明该文件不需要上传                
                task.reject();
                // 业务逻辑...

            } else {
                task.resolve();
            }
        }, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败,都触发重新上传
            task.resolve();
        });

        return $.when(task);
    }
    , beforeSend: function (block) {
        //分片验证是否已传过,用于断点续传
        var task = new $.Deferred();
        $.ajax({
            type: "POST",
            url: check_url,
            data: {
                type: "block",
                chunk: block.chunk,
                size: block.end - block.start
            },
            cache: false,
            async: false,  // 同步
            timeout: 1000, //todo 超时的话,只能认为该分片未上传过
            dataType: "json"
        }).then(function (data, textStatus, jqXHR) {
            if (data.is_exists) { //若存在,返回失败给WebUploader,表明该分块不需要上传
                task.reject();
            } else {
                task.resolve();
            }
        }, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败,都触发重新上传
            task.resolve();
        });
        return $.when(task);
    }
    , afterSendFile: function (file) {        
        var chunksTotal = Math.ceil(file.size / chunkSize);
        if (chunksTotal > 1) {
            //合并请求
            var task = new $.Deferred();
            $.ajax({
                type: "POST",
                url: check_url,
                data: {
                    type: "merge",
                    name: file.name,
                    chunks: chunksTotal,
                    size: file.size
                },
                cache: false,
                async: false,  // 同步
                dataType: "json"
            }).then(function (data, textStatus, jqXHR) {
                // 业务逻辑...
                
            }, function (jqXHR, textStatus, errorThrown) {
                current_uploader.uploader.trigger('uploadError');
                task.reject();
            });
            return $.when(task);
        }
    }
});

温馨提示:

1. 前端用html5和flash上传时上传的文件修改事件的时区(美国时间和中国事件)可能不一样,自己需要在后台判断处理,不然可能出现错误。
2. 如果同一个页面有多个webuploader上传,自己根据业务情况特殊处理,因为WebUploader.Uploader.register是全局的,对每个上传都有影响。

webuploader 断点续传的更多相关文章

  1. 浅谈文件断点续传和WebUploader的基本结合

    0.写在前面的话 上篇博客已经是在8月了,期间到底发生了什么,只有我自己知道,反正就是心情特别糟糕,生活状态工作状态学习状态都十分不好,还有心思进取吗,No!现在状态好起来了,生活又充满了希望 :D  ...

  2. 使用webuploader实现文件的断点续传

    webuploader是百度Fex团队开发的一款上传插件,对于现代浏览器采用了HTML5的方式进行上传,二为了兼容IE浏览器则采用了Flash的方式作为补充. 首先,这个插件在全局仅暴露一个WebUp ...

  3. webUploader实现大文件分片,断点续传

    问题: 公司现在的业务需求是要上传一个大文件,上一次写了一篇博客,做了一个简单的文件上传,支持单文件,大型文件上传 现在对之前的上传进行优化,支持断点续传,秒传功能 上次博客:[http://www. ...

  4. 单文件WebUploader做大文件的分块和断点续传

    前言: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流 ...

  5. webUploader大文件断点续传学习心得 多文件

    二.Jsp代码: <!-- 断点续传   start--> <!-- 隐藏域 实时保存上传进度 --> <input id="jindutiao" t ...

  6. php使用WebUploader做大文件的分块和断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  7. webuploader+Java如何实现分片+断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  8. 使用webuploader实现断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  9. java使用WebUploader做大文件的分块和断点续传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

随机推荐

  1. leveldb 学习笔记之log结构与存取流程

    log文件的格式 log文件每一条记录由四个部分组成: CheckSum,即CRC验证码,占4个字节 记录长度,即数据部分的长度,2个字节 类型,这条记录的类型,后续讲解,1个字节 数据,就是这条记录 ...

  2. Linux下调试程序方法

    您可以用各种方法来监控运行着的用户空间程序:可以为其运行调试器并单步调试该程序,添加打印语句,或者添加工具来分析程序.本文描述了几种可以用来调试在 Linux 上运行的程序的方法.我们将回顾四种调试问 ...

  3. flash中htmlText样式

    赋值htmlText时,htmlText中指定了样式的按指定样式显示,没有指定的按该文本的默认样式显示. PS:flash软件拖出来的文本,在赋值htmlText的时候该文本原有样式会失效,而new出 ...

  4. NAT技术

    该文摘自百度百科"NAT"中的一部分 NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地 ...

  5. 不起眼的 z-index 却能牵扯出这么大的学问

    z-index在日常开发中算是一个比较常用的样式,一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,是的,z-index的实际作用就是这样. 但是你真的了解z-in ...

  6. ubuntu下安装wordpress

    网上大多都是说放在var/www下面 实际上新版的ubuntu默认放在 var/www/html 下面 当然这个配置是可以修改的

  7. $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...

  8. 在iOS中使用Phonegap防止Webview被上下拖动

    在使用PhoneGap制作App的时候,iOS作为承载App页面的容器的Webview,在手指向下或者向上滑动屏幕时,除了页面本身的滚动外,还经常会看到整体页面底部和屏幕底部被拖动出黑屏 为了防止这一 ...

  9. jsp jsp指令

    JSP 由HTML和java语句拼接而成的文本,后缀名为.jsp 1.Jsp翻译成servlet:先翻译,Tomcat将翻译后的文件放置在安装目录下(所有JSP页面本质上就是Servlet程序) 2. ...

  10. 运用requirejs的异步加载方式

    很容易让人以为是权重出问题了,但就我自己多个项目动画导出的经验来看,大 我们说程序员核心能力有以下几点:自学能力,解决问题的能力,团队合作能力.自学可以让我们在这个日新月异的时代不被淘汰;解决问题可以 ...