Jquery file upload断点续传功能

最新推荐文章于 2023-05-23 22:59:50 发布

邹优秀

最新推荐文章于 2023-05-23 22:59:50 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_44792004/article/details/106082111

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Jquery file upload断点续传功能

主要实现文件暂停、恢复上传功能

以下是个人截取的一段,主要实现的是断点续传功能

function uploaderFile(id) {
    var maxFileSize = 1024 * 1024 * 1024 * 10; // 1G
    $('#' + id).fileupload({
        dataType: 'json',
        minFileSize: 5,
        dropZone: $(this),
        replaceFileInput: true,
        url: "/file/uploadFile",//文件的后台接受地址
        autoUpload: true,
        maxChunkSize: 1024 * 2 * 1024,// 2m
        sequentialUploads: true,
        add: function (e, data) {
            jqXHR = data.submit();
            // 点击暂停按钮暂停上传
            $("#stop").click(function () { 
                if (curId === data.jqXHR.uploadId) {
                    data.jqXHR.abort();
                    // 点击开始按钮开始上传
                    $("#begin").click(function () {
                        //设置文件上传进度
                        data.uploadedBytes = data._progress.loaded;
                        //文件进行恢复上传
                        $.blueimp.fileupload.prototype.options.add.call(e.target, e, data)
                    });
                }

            });
        }
    })

}

主要恢复上传代码：

//设置文件上传进度
data.uploadedBytes = data._progress.loaded;
//文件进行恢复上传  
$.blueimp.fileupload.prototype.options.add.call(e.target, e, data)

e.target值如下：
在这里插入图片描述
官方文档：

地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads#resuming-file-uploads

$('#fileupload').fileupload({
    maxChunkSize: 10000000, // 10 MB
    add: function (e, data) {
        var that = this;
        $.getJSON('server/php/', {file: data.files[0].name}, function (result) {
            var file = result.file;
            data.uploadedBytes = file && file.size;
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    }
});

注意：如果使用的form表单形式可以使用官方文档this这种方式，由于我是不是使用的form表单形式，所以使用的是e.target获取