javascript - Dropzone 不验证最大文件数

Question

我正在使用 dropzone 上传文件，我已将文件限制设置为最多六个文件，如果我一次上传一张图像，则此代码有效，但如果我在开始时按控制按钮选择多于六个图像上传文件，然后它不会验证文件并上传所有文件。我使用 laravel 作为后端，我的代码是:-

Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1, // MB
    maxFiles: 6,
    acceptedFiles: ".jpeg,.jpg,.png,.gif",
    clickable: true,
    init: function () {
        this.on("success", function(file, responseText) {
            file.previewTemplate.setAttribute('id',responseText[0].id);
        });
        this.on("thumbnail", function(file) {
            if (file.width < 350 || file.height < 200) {
                file.rejectDimensions()
            }
            else {
                file.acceptDimensions();
            }
        });
    },
    accept: function(file, done) {
        file.acceptDimensions = done;
        file.rejectDimensions = function() { done("Image width or height should be greater than 350*200"); };
    },
    removedfile: function(file){
        var name = file.name; 
        $.ajax({
                type: 'POST',
                url: ajax_url+'listing/deleteListingImage/'+name,
                dataType: 'html'
            });
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
            },   
            dictDefaultMessage: "Drop your files to upload"
    }

谢谢

Answer 1

您可以使用方法 removeFile(file) 删除多余的文件当 maxfilesexceeded被调用。

像这样:

Dropzone.options.myAwesomeDropzone = {
  maxFiles: 2,
  autoProcessQueue: false,
  init: function(){
    var myDropZone = this;
    myDropZone.on('maxfilesexceeded', function(file) {
      myDropZone.removeFile(file);
    });
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone">

</form>

http://output.jsbin.com/dodajij