Question

我正在使用Jquery文件上传扩展程序（https://github.com/blueimp/jQuery-File-Upload/）在我的网站上制作上传系统。

问题是，我不希望允许用户通过拖放区域上传多个文件，有没有办法限制它并且只允许单个文件上传？我发现按钮只有这样的限制，并且wiki中没有关于单个拖放上传的信息。

Answer 1

查看他们的文档，答案就在那里：

请注意，用户仍然可以拖放多个文件。强制执行一个文件上传限制，您可以使用maxNumberOfFiles选项（看到 Options）。

Answer 2

您需要将jquery.fileupload.validate.js添加到您的站点。然后将考虑maxNumberOfFiles属性。

您可以将其设置为1。

$('.something').fileupload({
    dropZone          : $('.your-dropzone'),
    url               : 'http://...',
    dataType          : 'json',
    maxNumberOfFiles  : 1
});

Answer 3

恢复这个q，因为我找到了一个解决方法，我需要自己做...

正如DazVolt指出的那样，maxNumberOfFiles值适用于会话中上传的所有文件，而不仅仅是特定的上传，因为jquery.fileupload-ui.js中的这个函数基本上计算了已处理的数量（即已经上传了UI中的表行，然后将其与maxNumberOfFiles进行比较：

getNumberOfFiles: function () {
                return this.filesContainer.children()
                    .not('.processing').length;
            },

幸运的是，这个getNumberOfFiles的定义可以改变......

要使其按上传工作，即每次上传时将其限制为一个文件但是上传次数与我一样多，我就这样做了：

在下载模板中，我将一个类'previousUploaded'添加到表格行的模板中：

{% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download fade previouslyUploaded">

在定义fileupload对象之前，我创建了一个由getNumberOfFiles调用的新函数，它对表行进行计数，但忽略那些已经上传的行，即下载模板中的条目所代表的行：

var perUploadRestriction = function () {
    // previouslyUploaded is a class added in template-download
    // with this query here it means previously uploaded files don't count towards the max_file_upload limit
    // only the files in the current upload in preparation
    return this.filesContainer.children().not('.processing').not('.previouslyUploaded').length;
};

然后我在fileupload对象定义中使用此函数，如下所示：

    $(this).fileupload({
        dropZone: $(this),
        processQueue: [{
            action: 'validate', 
            //acceptFileTypes: *a regex object for your file types*, 
            maxFileSize: 5000000, 
            maxNumberOfFiles: 1,
        }],
        getNumberOfFiles: perUploadRestriction,
    });

现在，如果我将多个文件拖放到dropzone，我会收到一条错误消息，但在成功上传后，我仍然可以使用相同的限制进行更多上传。

这有点像黑客，但适用于我的目的

Jquery文件上传：单个文件上传用于拖放

3 个答案: