Valums Ajax Uploader (Mutli) - 检测所有文件何时上传

Question

我正在使用 Valums Ajax Uploader 上传一批文件。我们最近将代码从单一上传类型更改为多重上传类型。这给我们的代码带来了问题。

如您所见，当 onComplete 事件触发时，我们重新加载页面以显示新上传的图像。但是，onComplete 事件似乎是在每个文件完成后触发，而不是在整个批次完成后触发。现在，这会导致问题，因为当第一个文件完成时，会触发页面重新加载尝试，并且上传者会弹出警报“如果您离开此页面，那么剩余的上传将会崩溃”或类似的内容。

我注意到 onComplete 事件发送回已完成文件的基于 0 的 ID，但我不确定如何使用它来确定批处理何时完成。

我想我的问题是 A) 当所有文件完成时是否会触发不同的事件或 B) 如何确定用户选择了多少个文件，以便在 onComplete 事件中进行跟踪已完成多少个文件？

    var uploader = new qq.FileUploader({
        multiple: true,
        element: document.getElementById('file-uploader'),
        action: '/projectPhotoUpload.php',
        allowedExtensions: ['jpg', 'png', 'gif'],
        debug: true,
        params: {id: i},
        onComplete: function(id, fileName, responseJSON){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }   
    })  

Answer 1

您可以添加一个计数器，该计数器在上传开始时递增，在完成时递减。仅当计数器为 0 时才重定向完成。

var running = 0;  
var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onSubmit: function(id, fileName){
        running++;                                 
    },
    onComplete: function(id, fileName, responseJSON){
        running--;
        if(running==0){
          window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }
    }   
}) 

Answer 2

很好的答案，出于兴趣，如果您想检查responseJSON以查看文件是否已上传，它在服务器脚本上设置

return array('success'=>true, 'filename'=>$filename . '.' . $ext);

然后您可以在JS中像

var success = responseJSON["success"]
var filename = responseJSON["filename"]

这样您可以创建文件列表并检查名称完成时，或仅递减

if (success == true)

如果上传失败，那么您可能不希望它递减，例如

Answer 3

您需要添加取消事件，以防用户取消文件上传：

onCancel: function(id, fileName){running--;}

我正在讨论在此处实施的正确方法。我还希望在文件上传后进行页面重定向，但如果用户打算上传更多文件怎么办？文件可能分布在不同的目录中。

似乎最好的方法是有一个“我完成”按钮，一旦用户完成上传，该按钮就会重定向。

Answer 4

一种更简单的方法是使用内部属性_filesInProgress来检查是否所有上传的文件都已被处理。
它会给出：

var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onComplete: function(id, fileName, responseJSON){
        if(uploader._filesInProgress == 0){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;
        }                                 
    }   
});