动态更新Dropzone MaxFiles设置

Question

Dropzone.options.dropzone = {
    uploadMultiple: false,
    maxFiles: {{ imagecount }},
    maxFilesize: 2, // MB
    dictFileTooBig: "That image is too large. We only allow 2MB or smaller.",
    acceptedFiles: ".jpeg, .jpg",
    init: function () {
        this.on("success", function(file, response) {
            $('.uploaded-photos').append('<div><img src="' + response.link + '"height="150" class="photo" id="' + response.id + '"/><span class="delete-photo">Delete</span></div>');
            $('.uploaded-photos').justifiedGallery('norewind')
            this.removeFile(file);
            var grabNewCount = parseInt($('.recordcount').text(), 10)
            $('.recordcount span').text(grabNewCount += 1);
            }); 
    }
};

每次上传/删除新图像时，我都在尝试动态更新MaxFiles属性。

您可以看到，页面加载时，我正在从服务器中传递{{ imagecount }}。这只是一项检查，以查看已为用户上传的图像，因此计算了他们剩下的要上传的图像。在首页加载上，这有效。

当我删除我使用Ajax要做的图像时，问题似乎就会出现。我似乎无法获得更新的MaxFiles值。如果我最初允许10张图像，并且用户当前已上传5个图像并删除一个，那么新的MaxFiles值现在应该是6，但是我所做的任何事情似乎都无法动态更新该值。这是我的删除代码：

$('.delete-photo').click(function() {
    $(this).text('') // remove "delete" text from button
    $(this).html('<i class="fa fa-spinner fa-spin"></i>') // add spinning icon to indicate "working"
    var csrf = $('[name=csrfmiddlewaretoken]').val();
    $.ajax({
        context: this,
        type: "POST",
        url: '/delete-photo/',
        data: {'csrfmiddlewaretoken': csrf, 'id': $(this).parent().attr('id') },
        dataType: "json",
        timeout: 10000,
        cache: false,
        success: function(data, textStatus, XMLHttpRequest){
            var image = $(this).parent();
            $(image).fadeOut(800, function() {
                $(this).remove();
                $('.uploaded-photos').justifiedGallery()
            });
            Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;
            var grabNewCount = parseInt($('.recordcount').text(), 10)
            $('.recordcount span').text(grabNewCount -= 1);
                  }
    });
});

因此，您可以看到我有Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;，以尝试获取当前的MaxFiles值并更新值 1，但这无济于事。

有什么想法？

Answer 1

因此，每次删除或上传新图像时，我都会通过将数据属性添加到表单标签中，并使用新数字来更新该属性。

我的服务器端代码传递了初始maxfiles（{{imagecount}}标签）倒入加载的页面：

<form data-count="{{ imagecount }}">

所以我的开放式滴定代码看起来像：

var maxFiles = $('.dropzone').attr('data-count'); Dropzone.options.dropzone = { uploadMultiple: false, maxFiles: maxFiles,

当某人通过dropzone上传图像时，.on（成功）函数我拥有：

var imagecount = $('.dropzone').attr('data-count'); imagecount = imagecount - 1; $('.dropzone').attr('data-count', imagecount);

和delete ajax函数的内部我有：

var imagecount = $('.dropzone').attr('data-count'); imagecount = imagecount + 1; $('.dropzone').attr('data-count', imagecount);

Answer 2

经过多个小时的试用和错误，我意识到此maxFiles设置无法正常运行大多数人期望的方式：它仅限于可以从资源管理器或Drag＆amp上载的图像数量;立即掉落。重新打开探险家/页面后，可以上传更多文件。我也没有反映任何服务器故障，例如超过文件上传的文件大小。

此外，一旦初始化了Dropzone，就无法从另一个脚本更改maxFile设置。因此，当从OD外部的画廊中删除文件时，Dropzone maxFile或图像的内部计数器将无法增加。

在我的情况下，更好的解决方案被证明是在<form action="/uploader">中阻止了服务器上过多图像的上传， CC_11

define('MAX_IMAGES', 10);
// Counting how many images already exist in the target directory
$imageCount = 0;
$fi = new FilesystemIterator($targetPath, FilesystemIterator::SKIP_DOTS);
foreach($fi as $fn) {
    $pathInfo = pathinfo($fn);
    $e = $pathInfo['extension'];
    if(in_array($e, array('jpg', 'jpeg', 'png', 'gif'))) {
        $imageCount++;
    }
}
if($imageCount >= MAX_IMAGES) {
    $success = false;
    $error = "Too many images";
    echo '{"name" : "'.$fileName.'", "success": "'.$success.'","extension" : "'.$fileExtension.'","dir_upload:":"'.$targetFolder.'","error":"'.$error.'","imageCount":"'.$imageCount.'"}';
    exit;
}

，然后在成功 dropzone的处理程序：

success: function (file, response) {
    var response_data = jQuery.parseJSON(response);
    if(!response_data.success) {
        errorFiles += 1;
        // Info about the error
        $(file.previewElement).addClass('dz-error').addClass('dz-complete').find('.dz-error-message').text(response_data.error);
    }
}

我希望对某人有帮助。

Answer 3

maxfiles 选项不应动态，也不应依赖于当前在dropzone中的文件数量。它表示应该允许在Dropzone实例上载的文件总量。

正确的解决方案要简单得多：确保Mockfiles（服务器提供）包括" dropzone.Added"的状态和"接受：true"，如下：

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.push(file);

虽然这在相当稀疏的文档中并不明显，但对模型的其他说明简要地提到了这里：https://docs.dropzone.dev/configuration/basics/methods?q=mockfiles

，但要点是：在上述内容中包括"状态"one_answers"接受"字段，以供您添加您现有的服务器文件。因此，您的 MaxFiles 选项设置尊重。

无需编写自定义功能/逻辑或表单属性等。