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

FineUploader client event after all uploads are done

本文关键字：FineUploader 客户端 事件      更新时间：2023-09-26

我实现了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');
    }
}

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

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

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

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

注意：我已经调整了我的16989719答案，以适用于非jQuery Fine上传器。

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
        }
    });
};
相关文章：