fine-uploader - FineUploader同时多次上传同一个文件

Question

假设我想一次上传多个文件，将 multiple 选项设置为 true 时我可以这样做:

var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
});

现在，假设我有一个按钮，可以让我选择要上传的文件。如果我单击所述按钮并选择 test.txt 文件，test.txt 将添加到将要上传的文件列表中。到目前为止，一切都很好。现在，我的问题是，如果我再次单击该按钮并再次选择 test.txt 文件，即使它已经在列表中，它也会被添加到列表中。

有什么方法可以阻止 FineUploader 让我这样做吗？

提前致谢

Answer 1

我会很小心地仅仅根据文件名声明一个文件是重复的。您至少还应该考虑尺寸。虽然，这在 IE9 和更早版本中是不可能的，因为我们无法在这些浏览器中确定客户端的文件大小。为了简单起见，让我们独占使用文件名...

一种方法是维护提交给上传者的文件名数组。您可以在 onSubmitted 处理程序中添加到此列表。您可以贡献一个 onValidate 处理程序，如果文件已存在于数组中，它将拒绝该文件。您的代码看起来像这样:

var filenames = [];
var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
    callbacks: {
        onSubmitted: function(id, name) {
            filenames.push(name);
        },
        onValidate: function(fileData) {
            return qq.indexOf(filenames, fileData.name) < 0;
        }
    }
});

此外，只是为了好玩，为什么不直接使用 Fine Uploader 的 jQuery 插件，因为您似乎已经在项目中使用了 jQuery？上面的例子使用下面的 jQuery 插件重写:

var filenames = [];
$('#test').fineUploader({
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false
})
    .on("submitted", function(event, id, name) {
        filenames.push(name);    
    })
    .on("validate", function(event, fileData) {
        return $.inArray(fileData.name, filenames) < 0;
    });