12

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

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

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

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

    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;                                 
        }   
    })
4

4 回答 4

22

您可以添加一个计数器，该计数器在开始上传时递增，在完成时递减。仅当计数器为 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;                                 
        }
    }   
})
于 2011-01-07T18:25:16.480 回答
4

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

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

然后你可以在 JS 中像

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

这样，您可以列出文件并在完成时检查名称，或者仅递减

if (success == true)

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

于 2011-05-19T08:08:24.610 回答
1

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

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

我正在讨论在我的实施中采取的正确方法。我也希望在文件上传后重定向页面，但如果用户打算上传更多文件怎么办？这些文件可能分散在不同的目录中。

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

于 2012-04-13T17:48:11.857 回答
-1

更简单的方法是使用内部属性_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;
        }                                 
    }   
});
于 2013-07-04T15:54:09.907 回答