Question

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

如您所见，当onComplete事件触发时，我们会重新加载页面以显示新上传的图像。但是，onComplete事件似乎在EACH文件完成后触发，而不是在整个批处理完成后触发。这现在导致了一个问题，因为当第一个文件完成时，页面重新加载尝试被触发，上传者弹出一个警告“如果你离开这个页面，那么剩余的上传内容将会松动” - 或者是这样的。 / p>

我注意到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;
        }                                 
    }   
});

Valiums Ajax Uploader（Multi） - 检测上传所有文件的时间

4 个答案: