javascript - 如何在 SWFUpload 中重置队列？

Question

我已经下载了 SWFUpload，希望创建通过我的网站上传大文件的功能。

我找到了这个指南:http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/我认为我可以从。不同的是，我只想一次只允许上传一张图片。 但我不知道如何在上传文件后恢复 SWFUpload？我希望重置队列并让进度条消失。

调试说:SWF DEBUG:事件:uploadError:达到上传限制。无法上传更多文件。

这是我的 SWFUpload 代码:

$(function()
{
    $('#swfupload-control').swfupload({
          upload_url                : "upload-file.php"
        , file_post_name            : 'uploadfile'
        , file_size_limit           : "102400" // 100 MB
        , file_types                : "*.jpg;*.png;*.gif"
        , file_types_description    : "Image files"
        , file_upload_limit         : 1
        , flash_url                 : "js/swfupload/swfupload.swf"
        , button_image_url          : 'js/swfupload/wdp_buttons_upload_114x29.png'
        , button_width              : 114
        , button_height             : 29
        , button_placeholder        : $('#button')[0]
        , debug                     : true
    })
    .bind('fileQueued', function(event, file)
    {
        var listitem='<li id="'+file.id+'">'+
            '<span class="progresstext"><span class="progressvalue"></span> '+file.name+'</span>'+
            '<div class="progressbar"><div class="progress"></div></div>'+
            '</li>';
        $('#log').append(listitem);
        // start the upload since it's queued
        $(this).swfupload('startUpload');
    })
    .bind('fileQueueError', function(event, file, errorCode, message)
    {
        alert('Size of the file '+file.name+' is greater than limit');
    })
    .bind('uploadStart', function(event, file)
    {
        $('#log li#'+file.id).find('span.progressvalue').text('0%');
    })
    .bind('uploadProgress', function(event, file, bytesLoaded)
    {
        //Show Progress
        var percentage = Math.round((bytesLoaded/file.size)*100);
        $('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
        $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
    })
    .bind('uploadSuccess', function(event, file, serverData)
    {
        var item = $('#log li#'+file.id);
        item.find('div.progress').css('width', '100%');
        item.find('span.progressvalue').text('100%');
    })
    .bind('uploadComplete', function(event, file)
    {
        // upload has completed, try the next one in the queue
        $(this).swfupload('startUpload');
    })

});

Answer 1

如果您要处理上传队列，使用 swfupload.queue plugin 会简单得多

然后您可以将“queueComplete”事件绑定(bind)到您的 swfupload 对象上，该事件将在处理完整个队列后触发(这是您希望隐藏进度条并重置队列的地方)。为了重置队列，此插件还添加了一个 cancelQueue() 函数(注意调用它的位置，因为它会取消任何正在进行的上传)。

如果你想手动取消它/不使用这个插件，你必须一个一个地取消文件，直到 stats() 对象说它是空的

// request your stat objects, it contains amongst others the number of files in the queue
var stats = my_upload.getStats();
// while the queue is not empty ...
while (stats.files_queued > 0) {
  // .. cancel the first in the queue (null: take the first found, false: don't trigger an error event)
  my_upload.cancelUpload(null, false);
  // it is important to reload the stats everytime and not just do a for (i = 0; i < stats.files_queued ...
  stats = my_upload.getStats();
}