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

此外，拖放区一旦初始化，就无法从其他脚本更改maxFile设置。因此，当从放置区外的画廊中删除文件时，maxFile或图像的内部计数器无法增加。

就我而言，更好的解决方案被证明是阻止服务器上过多的图像从uploader.php的{{1}}上上传

<form action="/uploader">

然后在Dropzone的成功处理程序中，我拥有：

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

我希望能帮助某人。

Answer 2

所以我通过向表单标记添加数据属性并在每次删除或上载新图像时使用新编号更新该属性来实现此目的。

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

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

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

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

在删除ajax函数里面我有：

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

动态更新Dropzone maxFiles设置

2 个答案: