多个 Dropzone.js 实例 - 文件上传到错误的实例

Question

我最近将 dropzone.js 从旧版本（2012）更新到最新版本。我在我的自定义 PHP CMS 中使用它来处理图像上传。我的 CMS 中有一个用于管理图像的部分。页面上显示多种图片形式，还可以通过Ajax动态添加更多图片形式到页面中。效果很好。然而，当我实际上传文件时，我的问题出现了 - 新的 dropzone.js 奇怪地将文件添加到错误的 dropzone 实例中。

举个例子。如果我有 4 个实例，第一个实例上传到第二个实例，其余实例上传到第一个实例。很奇怪。

我的Javascript如下：

        // INITIALISE DROPZONE
        $(".multi-dropzone").each(function(i, element) {

            // CHECK THERE ISN'T A DROPZONE ALREADY ON THERE
            if ($(this).get(0).dropzone) { return; }

            // GET THE IMAGE ID TO PASS INTO PROCESSING
            let imageid = $(this).data("imageid");
            let pageid = $(this).data("pageid");

            $(this).dropzone({
                url: 'edit.php?id='+pageid+'&mode=update-image&img_id='+imageid,
                uploadMultiple: false,
                maxFilesize: 10, // 10MB
                parallelUploads: 1,
                clickable:  '.dropzone',
                createImageThumbnails: false,
                dictFileTooBig: "File is too big ({{filesize}}MB). Max filesize: {{maxFilesize}}MB.",
                acceptedFiles: "image/*",
                init: function() {

                    var self = this;

                    // WHEN ADDING A FILE
                    self.on('addedfile', function(file) {

                        $(this).css("border", "solid red 2px");

                        console.log("Added file to Dropzone with image ID: " + imageid);

                        // REMOVE OLD PREVIEW
                        if ($(this.element).find('.dz-preview').length > 1) {
                            $(this.element).find('.dz-preview').first().remove();
                        }
                    });


                    // SUCCESSFULLY ADDED
                    self.on('success', function(file, response) {

                        // UPDATE HIDDEN IMAGE NAME
                        alert(response);
                        $(self.element).find('.img_name').val(response);

                    });

                }
            });
        });
    }
    // ENABLE ALL DROPZONES
    init_image_dropzones();

在更新到最新的 dropzone.js 之前，这工作得很好。不确定我在这里做错了什么。

当我通过浏览器检查页面标记时，我可以看到 dropzone.js 正在插入 4 个隐藏文件字段。问题是这 4 个字段是相同的。属性相同。没有什么独特之处可以将它们附加到页面上 dropzone 元素的特定实例。

我在这里缺少什么？

最新的 jQuery、jQuery UI 和 dropzone.js 均已加载。

.page-image 元素之一的前端输出示例如下：

  <form action="edit.php?id=1&amp;mode=update-image-details&amp;img_id=34" method="POST" id="img-34-form" class="image-form" enctype="multipart/form-data">
    <div id="dropzone-34" class="dropzone multi-dropzone dz-clickable" data-pageid="1" data-imageid="img_34">
      <input type="hidden" class="img_name" name="img" id="img" value="">
      <!-- IMAGE PREVIEW -->
      <div class="dz-preview">
        <div class="dz-image">
          <img data-dz-thumbnail="" alt="Image description goes here..." src="/path/to/image.jpg">
        </div>
        <div class="dz-details" data-dz-message="">
          <div class="dz-message">
            <p class="upload-image">Click image to update</p>
          </div>
        </div>
      </div>
    </div>
    <input type="text" id="title" name="title" class="textbox-blended image-title" value="Image Title Here...">
    <input type="submit" id="submit" name="submit" class="submit-button circle-btn inline-submit" value="save">
    </div>
  </form>
  <button id="delete-1-34" type="button" class="inline-delete circle-btn" data-parent-id="1" data-item-id="34"></button>
</div>

Answer 1

好吧，在与我的朋友 ChatGPT 进行一些讨论并进行一些摆弄之后，我发现问题纯粹在于我对可点击配置选项的实现。在我的标记中，我有几个元素出现在 :hover over my dropzone 上。通过定位出现在其上方的 dropzone 内的这些元素之一，dropzone.js 现在可以准确地确定我正在与哪种表单进行交互。在这种情况下，仅仅将 .dropzone 声明为我的可点击元素似乎过于笼统。事后看来，完全有道理。

我现在有：

可点击：'.image-update'

而且效果非常好。