使用 RejamableJS 取消、中止和重试单个文件上传

Cancel, Abort and Retry individual file upload with ResumableJS

本文关键字：单个 重试 文件 RejamableJS 取消 使用      更新时间：2023-09-26

我已经成功地使用RejamableJS将多个文件以块的形式上传到服务器。在上传过程中，用户能够看到整体上传进度和单个文件上传百分比。也可以暂停/恢复整个上传。

我现在想允许用户取消/中止单个文件上传，而不会中断其他文件上传。
在ResumableJS网站中，有一些方法可以做我想做的事情，但没有关于如何做到这一点的例子。
我尝试了以下方法：

onclick="ResumableFile.abort(); return(false);"
onclick="file.abort(); return(false);"
onclick="this.abort(); return(false);"

如何在不中断整个文件上传的情况下中止特定文件上传？

更新：这是我的JS代码：

var r = new Resumable({
    target: 'FileHandler.ashx'
});
// Resumable.js isn't supported, fall back on a different method
if (!r.support)
{}
else
{
    // Show a place for dropping/selecting files
    $('.resumable-drop').show();
    r.assignDrop($('.resumable-drop')[0]);
    r.assignBrowse($('.resumable-browse')[0]);
    // Handle file add event
    r.on('fileAdded', function (file)
    {
        //// Add the file to the list
        $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" id="removeButton" onclick="abortFile();">Remove</button>');
        $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);
        // Actually start the upload
        r.upload();
    });
    //var file = new ResumableFile();
    //$("#removeButton").on("click", function ()
    //{
    //    console.log("abort!");
    //    file.abort();
    //});
    function abortFile()
    {
        console.log("abort!");
        r.abort();
    }
    r.on('pause', function ()
    {
        // Show resume, hide pause main progress bar
    });
    r.on('complete', function ()
    {
        // Hide pause/resume when the upload has completed
    });
    r.on('fileSuccess', function (file, message)
    {
        // Reflect that the file upload has completed
    });
    r.on('fileError', function (file, message)
    {
        // Reflect that the file upload has resulted in error
    });
    r.on('fileProgress', function (file)
    {
        // Handle progress for both the file and the overall upload
    });
}


在Ruben Rutten的帮助下，我解决了我的问题：

// Handle file add event
r.on('fileAdded', function (file)
{
    // Show progress bar
    // Show pause, hide resume
    //// Add the file to the list
    $('.resumable-list').append('<li class="resumable-file-' + file.uniqueIdentifier + '">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span> <button type="button" class="removeButton" id="' + file.uniqueIdentifier + '">Remove</button>');
    $('.resumable-file-' + file.uniqueIdentifier + ' .resumable-file-name').html(file.fileName);

    ///event to remove file from upload list
    $(".removeButton").on("click", function ()
    {
        for (var i = 0; i < r.files.length; i++)
        {
            var identifier = $(this).attr("id");
            if (r.files[i].uniqueIdentifier == identifier)
            {
                r.files[i].cancel();
                $('.resumable-file-' + identifier).remove();
            }
        }
    });
    r.upload();
});
我知道

这是一个老问题，但这可能会对某人有所帮助：

查看您的解决方案，有一种比迭代所有文件更有效的方法来获取可恢复实例：

// event to remove file from upload list
$(".removeButton").on("click", function ()
{
    var identifier = $(this).attr("id");
    var file = resumable.getFromUniqueIdentifier(identifier);
    file.cancel();
    $('.resumable-file-' + identifier).remove();
});

如果你有你的JavaScript文件/部分，你创建一个var r = new Resumable()。您应该创建一个中止它的函数，例如

function abortFile() {
    r.abort();
}

然后在按钮上，使用 onclick="abortFile(); return false;"

我还没有测试过它，但它应该可以工作。

如果你使用jQuery，你可以执行以下操作：

<button id="cancelButton">Cancel</button>
<script type="text/javascript">
    // Not sure if this works, just to test
    var file = new ResumableFile();
    $("#cancelButton").on("click", function() {
        file.abort();
    });
</script>
相关文章：