所有上传完成后的 FineUploader 客户端事件

Question

我实现了 FineUploader，我想在上传所有文件后将我的客户端脚本连接到一个事件。那可能吗？

我的实现如下。只是想知道这是否是正确的方向。

    function init() {
    var uploader = new qq.FineUploader({
        element: document.getElementById('button-selectfiles'),
        request: {
            endpoint: '/Up/UploadFile'
        },

        callbacks: {
            onStatusChange: onFileUploadStatusChange
        }
    });
};

var uploads = 0;
function onFileUploadStatusChange(id, oldStatus, newStatus) {
    console.log(newStatus);

    if (newStatus === 'submitting') {
        uploads++;
    }

    if (newStatus === 'upload successful' || newStatus === 'upload failed') {
        uploads--;
    }

    if (uploads === 0) {

        console.log('done');
    }
}

Answer 1

onComplete - 用于单个上传文件，如果您使用多个文件上传，请使用onAllComplete：

callbacks: {
    onAllComplete: function() {
        alert('done')
    }
}

Answer 2

您的 onFileUploadStatusChange 函数无法检查已取消的文件。

验证是否所有文件都已上传的方法是通过 API 方法：getInProgress 和 getUploads。如果我们有 0 次上传正在进行，0 次上传失败，那么我们可以安全地假设所有文件都已上传。如果您仍想在任何上传失败的情况下继续进行，您可能需要取消对上传失败的检查。我们在onStatusChange 和onComplete 回调期间检查是否满足这些条件。 onStatusChange 事件应该只检查文件是否已被取消，因为这可能意味着所有 其他 文件都已完成，因此可以完成自定义操作。

注意：我已经修改了16989719 的答案以适用于非 jQuery Fine Uploader。

function init() {
    var uploader;

    function check_done() {
    // Alert the user when all uploads are completed.
    // You probably want to execute a different action though.
        if (allUploadsCompleted() === true) {
            window.alert('All files uploaded');
        } 
    }

    function allUploadsCompleted() {
        // If and only if all of Fine Uploader's uploads are in a state of 
        // completion will this function fire the provided callback.

        // If there are 0 uploads in progress...
        if (uploader.getInProgress() === 0) {
            var failedUploads = uploader.getUploads({ status: qq.status.UPLOAD_FAILED });
            // ... and none have failed
            if (failedUploads.length === 0) {
                // They all have completed.
                return true;
            }
        }        
        return false;
    }

    uploader = new qq.FineUploader({
        element: document.getElementById('button-selectfiles'),
        request: {
            endpoint: '/Up/UploadFile'
        },
        callbacks: {
            onStatusChange: function (id, oldStatus, newStatus) {
                // This will check to see if a file that has been cancelled
                // would equate to all uploads being 'completed'.
                if (newStatus === qq.status.CANCELLED) {
                    check_done();
                }     
            },
            onComplete: check_done
        }
    });
};