如何在jQuery File Upload basic-plus.html中实现断点续传功能？

我看了你贴的代码，问题出在你把断点续传的核心逻辑放错位置了——你现在是在上传按钮的点击事件里查询已上传字节数，但jQuery File Upload的断点续传逻辑需要在fileuploadadd事件里提前处理，这样插件才能在上传时识别已上传的部分，实现断点续传。

下面是修改后的完整代码，我会标注关键改动点：

$(function () {
    'use strict';

    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'blueimp.github.io' ?
        '//jquery-file-upload.appspot.com/' :
        'server/php/',
        uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
            });

    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(avi|flv|wmv|mpg|mp4|mov|3gp|m4v)$/i,
        maxFileSize: 969932800, // 900 MB
        maxChunkSize: 2000000, // 2 MB 这个配置保留，是断点续传的基础
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
    }).on('fileuploadadd', function (e, data) {
        var that = this; // 保存当前fileupload实例的引用
        data.context = $('<div/>').appendTo('#files');
        
        // 关键改动：在这里查询已上传的字节数，而不是按钮点击事件里
        $.getJSON('server/php/', {file: data.files[0].name}, function (result) {
            var file = result.file;
            // 给data对象设置已上传字节数，插件会基于这个值续传
            data.uploadedBytes = file && file.size;
            // 调用插件原生的add方法，让插件处理断点续传逻辑
            $.blueimp.fileupload.prototype.options.add.call(that, e, data);

            // 下面是原来的UI渲染逻辑，放在这里执行
            $.each(data.files, function (index, file) {
                var node = $('<p/>').append($('<span/>').text(file.name));
                if (!index) {
                    node
                        .append('<br>')
                        .append(uploadButton.clone(true).data(data));
                }
                node.appendTo(data.context);
            });
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

关键改动说明： #

• 把查询已上传字节数的$.getJSON逻辑从上传按钮的click事件移到了fileuploadadd事件里，这是因为插件需要在文件刚被添加时就知道已上传的部分，才能正确分割后续的上传块。
• 调用$.blueimp.fileupload.prototype.options.add.call(that, e, data)来触发插件原生的add处理逻辑，这样插件会基于data.uploadedBytes的值跳过已上传的部分，实现断点续传。
• 确保你的后端server/php/接口在接收file参数（文件名）时，能正确返回该文件已上传的字节数（比如存在服务器上的临时文件大小），这是断点续传的后端基础——如果后端没有记录已上传的字节，前端的配置再对也没用。

另外要注意：如果你的后端没有处理分块上传的逻辑，只配置前端是不够的，需要确保后端能接收chunk、chunks、uploadedBytes这些参数，并正确合并分块文件。

内容的提问来源于stack exchange，提问作者Viki