DropzoneJS 将文件选择限制为一个文件，但允许后续上传

Question

我正在尝试使用选项 maxFiles: 1; 将用户可以 select 的文件数量限制为一个；但是，这也会阻止用户上传我想要的第二个、第三个等文件。我只希望将 selection 限制为一个文件并允许后续上传。这可能吗？

这是我的代码：

$(function() {
    var dropzone = new Dropzone('#avatar-wrapper', {
        url: '/uploads/avatar',
        clickable: '.upload',
        maxFilesize: 5,
        maxFiles: 1,
        previewsContainer: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        init: function() {
            this.on('addedfile', function(file) {
                console.log('test');
                $('#loader').show();
            });

            this.on('success', function(file, result) {
                $('#avatar_url').val(result.url);
                $('#avatar').attr('src', result.url);
                $('#loader').hide();
            });
        }
    });
});

Answer 1

在 dropzone.js 文件中找到：

if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
    _this3.hiddenFileInput.setAttribute("multiple", "multiple");
}

并注释掉第二行：

if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
    //_this3.hiddenFileInput.setAttribute("multiple", "multiple");
}

这解决了我的问题；但是最好在 DropzoneJs

中实现它

Answer 2

您可以在初始化 DropZone 元素后在运行时执行此更改，而不是修补 DropZone 库。

var dropzone = new DropZone('#avatar-wrapper', {
    // options ...
});
dropzone.hiddenFileInput.removeAttribute("multiple");

DropzoneJS 将文件选择限制为一个文件，但允许后续上传

DropzoneJS limit selecting of files to one file but allow subsequent uploads

javascript

file-upload

image-uploading

dropzone.js