Dropzone.js

Question

我知道 Dropzone 支持将文件大小限制在一定数量 MB 的可能性（通过 maxFilesize），但是有没有办法添加 minFilesize？这是因为我不希望空文件到达服务器。

我看到这是插件中的一点，它决定在文件太大的情况下如何处理文件：

Dropzone.prototype.accept = function (file, done) {
            if (file.size > this.options.maxFilesize * 1024 * 1024) {
                return done(this.options.dictFileTooBig.replace("{{filesize}}", Math.round(file.size / 1024 / 10.24) / 100).replace("{{maxFilesize}}", this.options.maxFilesize));
            } else if (!Dropzone.isValidFile(file, this.options.acceptedFiles)) {
                return done(this.options.dictInvalidFileType);
            } else if ((this.options.maxFiles != null) && this.getAcceptedFiles().length >= this.options.maxFiles) {
                done(this.options.dictMaxFilesExceeded.replace("{{maxFiles}}", this.options.maxFiles));
                return this.emit("maxfilesexceeded", file);
            } else {
                return this.options.accept.call(this, file, done);
            }
        };

我知道我可以在这里添加一个额外的 else if 来处理 minFilesize 场景，但我想远离插件的代码并且只在可能的情况下才这样做 'externally' , 通过插件发出的事件。

这可能吗？

Answer 1

根据 http://www.dropzonejs.com/#configuration 的说法，应该按照以下方式进行操作：

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.size == 0) {
      done("Empty files will not be uploaded.");
    }
    else { done(); }
  }
};

Answer 2

以下代码对我来说效果很好。但是当参数 maxFilesize: 500 与 accept 函数一起使用时，它会给我带来不可预测的结果，因此，如果您将它与 accept 函数一起使用，请删除 maxFileSize 参数。

var emojiCustomizationDropzone = new Dropzone("#emojiCustomizationDropBox", {
paramName: "images",
accept: function(file, done) {
    if (file.size == 0) {
        done("Sorry, Your file is empty, Nothing to upload");
        return;
    } else if (file.size > MAX_UPLOAD_FILE_SIZE) {
        done("Sorry, Your file is too large to upload, Maximum file size is 500KB");
    }else {
        done();
    }
},
url: sampleURL,
uploadMultiple: true,
autoProcessQueue: false,
method: "POST",
enctype: "multipart/form-data",
headers: {
    contentType: false,
    processData: false,
    authorization: "Bearer " + $.cookie("Access_token")
},
    parallelUploads: 1,
    maxFiles: 1
});

此接受功能不会阻止我将文件添加到保管箱。我可以为此建议另一种解决方案。我们可以在 onaddedfile 方法中添加我们喜欢的条件。如果文件不匹配，我们可以使用 dropzone 中的 removeFile 方法将其从相应的 dropzone 中删除。

emojiCustomizationDropzone.on("addedfile", function (file) {
if (file.size == 0) {
    emojiCustomizationDropzone.removeFile(file);
    return;
}
if (file.size > MAX_UPLOAD_FILE_SIZE) {
    emojiCustomizationDropzone.removeFile(file);
    return;
}
}

希望这对某人有所帮助。

Dropzone.js - 防止空文件上传到服务器

Dropzone.js - prevent empty files from uploading to the server

javascript

jquery

file-upload