当前位置: 首页 > 工具软件 > Resumable.js > 使用案例 >

基于Resumable.js的断点上传

丘智志
2023-12-01

最近在做项目中。需要将手机相册的图片,上传到服务器。很多图片都是超过1MB的。于是就想到了使用Resumable.js .

官方介绍:

Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能。在上传大文件的时候通过每个文件分割成小块,

每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。

  此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传。Resumable.js 除了 HTML5 文件 API

意外,没有任何外部依赖。目前,这意味着支持仅限于 Firefox 4+, Chrome 11+ and Safari 6+。

GitHub地址: https://github.com/23/resumable.js/archive/master.zip

直接上项目中的代码:

        /**
         * 断点续传
         */
        web_Uploader: function () {
            var r = new Resumable({
                target: args.material_breakpoint_url,
                agent_id_sjk: args.agent_id  //自定义参数 
            });

            r.assignBrowse(document.getElementById('upload_btn'));

            r.on('fileSuccess', function (file) {

                 //todo...

                
            });


            r.on('fileProgress', function (file) {

                //上传途中 服务器 校验 返回错误
                if (args.async_uploader_msg != '') {
                    json = $.parseJSON(args.async_uploader_msg);
                    if (json.status == 404) {
                       //todo...
                    }
                }
                var num = Math.floor(r.progress() * 100);

                //到98%退出,剩下时间是给后面DOM的操作,以及图片完全加载
                if (num >= 98) {
                    return;
                }
                $("#lodding_num").text(num + '%');
            });

            r.on('filesAdded', function (array) {

                $("#lodding_text").show().find("#lodding_num").text('0%');
                App.lodding('lodding');
                r.upload();
            });

            r.on('fileError', function (file, message) {
                layer.msg('文件错误!');
               
            });

            r.on('error', function (message, file) {
                layer.msg('上传发生错误,请稍后再试!');
               
            });
        }

 类似资料: