3

ResumableJSを使用して、複数のファイルをチャンクでサーバーにアップロードすることに成功しました。アップロード プロセス中、ユーザーは全体的なアップロードの進行状況と個々のファイルのアップロードの割合を確認できます。アップロード全体を一時停止/再開することもできます。

私が今したいのは、ユーザーが他のファイルのアップロードを中断することなく、個々のファイルのアップロードをキャンセル/中止できるようにすることです。
ResumableJS Web サイトには、私がやりたいことを実行できる方法がいくつかありますが、これを達成する方法の例はありません。
私は次のことを試しました： 

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();

});
4

2 に答える 2

0

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>
于 2014-11-26T02:12:03.987 に答える