动态更新 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 设置并没有像大多数人期望的那样工作：它只限制了可以从资源管理器上传或一次拖放的图像数量。重新打开资源管理器/页面重新加载后，可以上传更多文件。我也没有反映任何服务器故障，例如超过文件上传的文件大小。

此外，一旦 dropzone 被初始化，maxFile 设置就不能从另一个脚本中更改。因此，当从 od dropzone 之外的图库中删除文件时，maxFile 或图像的内部计数器无法增加。

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

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 处理程序中：

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 2

因此，我通过向表单标签添加数据属性并在每次删除或上传新图像时使用新数字更新该属性来实现此功能。

我的服务器端代码将初始 maxfiles（{{imagecount}} 标签）计数传回加载页面：

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

所以我的开放 dropzone 代码如下所示：

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

当有人通过 dropzone 上传图片时，在 .on(success) 函数中我有：

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

在我的删除 ajax 函数内部：

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