动态更改 Dropzone maxFiles

Posted 2023-05-08

【中文标题】动态更改 Dropzone maxFiles

【英文标题】：Change Dropzone maxFiles Dynamically

【发布时间】：2020-02-14 14:49:16

【问题描述】：

每次上传/删除新图像时，我都会尝试动态更新 MaxFiles 属性。 通过使用以下代码，它不允许上传任何图像，而不是将其限制为 maxFiles。它没有取变量maxFile 的值，但是当我删除maxFile 变量并输入一个数字时，它工作正常。 从Answer 得到源代码的想法。

!function ($) 
"use strict";
var Onyx = Onyx || ;


Onyx = 
    init: function() 
        var self = this,
            obj;

        for (obj in self) 
            if ( self.hasOwnProperty(obj)) 
                var _method =  self[obj];
                if ( _method.selector !== undefined && _method.init !== undefined ) 
                    if ( $(_method.selector).length > 0 ) 
                        _method.init();
                    
                
            
        
    ,

    userFilesDropzone: 
        selector: 'form.dropzone',
        init: function() 
            var base = this,
                container = $(base.selector);

            base.initFileUploader(base, 'form.dropzone');
        ,
        initFileUploader: function(base, target) 

            var maxFile = $('.dropzone').attr('data-count');

            var onyxDropzone = new Dropzone(target, 
                url: ($(target).attr("action")) ? $(target).attr("action") : "data.php", // Check that our form has an action attr and if not, set one here
                maxFiles: maxFile, 
                maxFilesize: 5,
                acceptedFiles: ".JPG,.PNG,.JPEG",
            //  previewTemplate: previewTemplate,
            //  previewsContainer: "#previews",
                clickable: true,
                uploadMultiple: false,

            );

            onyxDropzone.on("success", function(file, response) 
                let parsedResponse = JSON.parse(response);
                file.upload_ticket = parsedResponse.file_link;
                var imagecount = $('.dropzone').attr('data-count');
                    imagecount = imagecount - 1;
                    $('.dropzone').attr('data-count', imagecount);
            );
        ,
    
  
// javascript Document

function openImagePopup(id = null) 
   $(".upload-images").show();
    $.ajax(
        url: 'fetch.php',
        type: 'post',
        data: id: id,
        dataType: 'json',
        success:function(response) 
            var imagecount = response.counts;
            $('.dropzone').attr('data-count', imagecount);
    
 );
  

HTML

<form action="data.php" class="dropzone files-container" data-count="">
   <div class="fallback">
       <input name="file" type="file" multiple />
   </div>
   <input type="hidden" id="imageId" name="imageId">
</form>

【问题讨论】：

你能提供一个包含 和 data-count 属性的示例 html 代码块吗？

@JonathanLarouche 问题已更新为 HTML。

【参考方案1】：

更新答案

实例化后，Dropzone 插件将保持相同的选项，除非您直接更改实例内部选项。

要更改 Dropzone 的选项，您可以使用以下代码行：

$('.dropzone')[0].dropzone.options.maxFiles = newValue;

$('.dropzone')[0] 返回第一个 dropzone DOM 元素

.dropzone.options 返回 Dropzone 的底层插件实例选项。您现在可以直接在此对象上更改任何选项。

在您的情况下，您将不得不更改启动弹出窗口的功能，如关注

function openImagePopup(id = null) 
   $(".upload-images").show();
    $.ajax(
        url: 'fetch.php',
        type: 'post',
        data: id: id,
        dataType: 'json',
        success:function(response) 
            var imagecount = response.counts;
            $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
    
 );

然后像这样改变 dropzone onSuccess 事件：

onyxDropzone.on("success", function(file, response) 
    let parsedResponse = JSON.parse(response);
    file.upload_ticket = parsedResponse.file_link;
    var imagecount = $('.dropzone')[0].dropzone.options.maxFiles - 1;
    $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
);

如您所见，您还可以删除元素上的 data-count="" 属性并重用插件实例 options.maxFiles 中的值

【讨论】：

仍有问题。它与点击功能一起使用，但在上传文件时不适用于dropzone。它不允许任何文件上传。我想maxfile里面的dropzone函数还是0。

您是否尝试console.log(maxFile) 查看传递给 Dropzone 插件的值？

它的值为0，console.log(maxFile)

应该这样吗？实例化 Dropzone 插件后是否设置 data-count 属性？

是的，在 dropzone 插件内的第 33 行，在我在插件之外使用它之前，结果相同。

【参考方案2】：

经过几个小时的反复试验，我意识到在许多情况下，使用 Dropzone 中的 maxFiles 设置并不完全符合预期。该设置将仅限制通过资源管理器/拖放上传文件，但重新加载后可以上传更多文件。它也不反映服务器端上传的任何失败（例如文件大小太大）。

从外部更改已初始化 Dropzone 的 maxFiles 设置的值是不可能的。例如，在使用 ajax 删除一些图像后重置允许文件的数量将不起作用。

要真正控制可以上传到服务器的文件数量必须在服务器上进行计数。然后在 Dropzone 中，在 success 函数中，我们应该处理 ajax 响应：

success: function (file, response) 
    var response_data = jQuery.parseJSON(response);
    if(!response_data.success) 
        $(file.previewElement).addClass('dz-error');
        $(file.previewElement).addClass('dz- complete');
        $(file.previewElement).find('.dz-error-message').text(response_data.error);
    

response是分配给Dropzone<form>的action属性的脚本提供的反馈信息，例如<form action="/uploader">.