DropzoneJS限制单次选1个文件但允许多次上传实现方案

你遇到的问题是因为maxFiles: 1这个配置是用来限制Dropzone实例中总文件的最大数量，而不是单次选择的数量。所以当你上传一个文件后，Dropzone就会阻止添加新文件，这和你想要的「每次选1个，但允许多次上传」的需求不匹配。

下面分两种常见场景给出解决方案：

场景1：允许累加多个文件，但每次只能选择1个上传 #

这种场景下，用户可以多次点击上传按钮，每次选择1个文件，最终上传多个文件。我们需要移除maxFiles: 1，转而监听filesadded事件来限制单次选择的文件数量：

$(function() {
  var dropzone = new Dropzone('#avatar-wrapper', {
    url: '/uploads/avatar',
    clickable: '.upload',
    maxFilesize: 5,
    previewsContainer: false,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    init: function() {
      // 监听文件批量添加事件，限制单次选择数量
      this.on('filesadded', function(files) {
        if (files.length > 1) {
          // 移除除第一个外的所有多余文件
          for (let i = 1; i < files.length; i++) {
            this.removeFile(files[i]);
          }
          alert('每次只能选择1个文件，请重新选择');
        }
      });

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

场景2：每次上传替换之前的文件（头像上传常见场景） #

如果是头像上传这类场景，通常希望新上传的文件直接替换旧的，而不是累加。这种情况下，我们可以在添加新文件时自动移除旧文件，同时保留允许多次选择上传的能力：

$(function() {
  var dropzone = new Dropzone('#avatar-wrapper', {
    url: '/uploads/avatar',
    clickable: '.upload',
    maxFilesize: 5,
    previewsContainer: false,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    init: function() {
      this.on('addedfile', function(file) {
        // 移除所有之前的文件，确保当前只有一个文件
        while (this.files.length > 1) {
          this.removeFile(this.files[0]);
        }
        console.log('test');
        $('#loader').show();
      });

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

关键说明： #

• 移除maxFiles: 1：这个配置会限制总文件数，不符合多次上传的需求。
• filesadded事件：用户选择一批文件后触发，适合用来限制单次选择的数量。
• addedfile事件：单个文件被添加时触发，适合用来处理替换旧文件的逻辑。

内容的提问来源于stack exchange，提问作者Petar Vasilev