单个页面中的多个 Dropzone

Question

我正在使用 Dropzone 而不创建 dropzone 表单。它以这种方式对我很有用。

但在这种情况下，我无法在我的页面中创建另一个 Dropzone 实例。

 var myDropzone1 = new Dropzone(
        document.body,
        {
            url : "upload1"...
            .
            .
            . some parameters
         };

var myDropzone2 = new Dropzone(
        document.body,
        {
            url : "upload'"...
            .
            .
            . some parameters
         };

当我这样做时，出现错误 Dropzone already attached.

原文由 mekafe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是可能的，但您不能像您那样在同一个元素上绑定第二个 dropdzone。一个元素上的 2 个 Dropzones 毫无意义。解决方案 atm 中的 2x document.body。尝试这个…

HTML:

 <form action="/file-upload" class="dropzone" id="a-form-element"></form>
<form action="/file-upload" class="dropzone" id="an-other-form-element"></form>

脚本：

 var myDropzoneTheFirst = new Dropzone(
        //id of drop zone element 1
        '#a-form-element', {
            url : "uploadUrl/1"
        }
    );

var myDropzoneTheSecond = new Dropzone(
        //id of drop zone element 2
        '#an-other-form-element', {
            url : "uploadUrl/2"
        }
    );

原文由 lin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

注意：我没有使用 Ajax 来将图像上传到服务器。对于 Ajax，可以使用 url 。附加文档 DropzoneDoc 。它就像动作一样工作。（类似这样的事情。检查我的解决方案，您可以根据自己的情况了解一些想法。

当我在 dropzone 工作时，我在使用 Meteor 框架时遇到了类似的问题。

在 Meteor Framework 的情况下，dropzone 在下面的代码中初始化。这对你来说看起来会有所不同，这是在 Meteor 框架中初始化的方式。在您的情况下，您可以在使用 dropzone 库时找到相似之处。

参数添加为

params=‘{name: “Image1”}’

 {{> dropzone url=getDropZoneImageUploadURL id='candidate-identity-photo-proof'
  init=initFunction params='{name: "Image1"}'
  acceptedMimeTypes= 'image/jpeg,image/png,image/jpg' maxFiles=1
  success=uploadSuccessHandler maxFilesize=2 dictDefaultMessage= "Photo
  ID Proof Photo"
  previewsContainer='#upload-photo-id-holder'
  previewTemplate=previewTemplateString}}

上传文件时，请按照下面的代码检查“this”上下文。您可以使用 params 值来区分图像。

 var initFunction = function () {
this.on("addedfile", function () {
    if (this.files[1] != null) {
        this.removeFile(this.files[0]);
    }
});
this.on("sending", function (file, xhr, formData) {
    console.log(this); // Here you can get the value
    formData.append("type", "image");
});
this.on("error", function (fileInfo, errorMessage) {
    var message = "ERROR";
    showNotification("error", { message: message }, {});
});

};

原文由 shubham kapoor 发布，翻译遵循 CC BY-SA 4.0 许可协议