jquery 将dropzone.js div元素动态添加到表单中

gc0ot86w  于 2022-12-12  发布在  jQuery
关注(0)|答案(5)|浏览(135)

我必须使用多个dropzone区域来上传图像。我已经使用jQuery append()函数来动态创建div。
问题是动态创建的拖放区未初始化,因此无法工作。

yruzcnhs

yruzcnhs1#

只要确保在 * 新附加的元素 * 上调用插件。问题是插件只附加到最初存在的元素。
因此,在添加元素后再次调用插件,这样,它就被附加并再次工作。

rpppsulh

rpppsulh2#

下面是我用来做同样事情的脚本。我已经通过使用 querySelector 更改了动态创建的输入类型文本的名称字段。querySelector 返回具有我使用的data-tagline自定义属性的元素的引用。
第一个

h22fl7wq

h22fl7wq3#

在脚本中,需要一个函数来创建dropzone的表单,然后执行函数Dropzone.discover()

function add_dropzone() {
  const drop_zone = document.createElement("form");
  drop_zone.setAttribute("class","dropzone");
  drop_zone.setAttribute("action","url_to_upload_files/");
  drop_zone.setAttribute("id","my_dropzone");
  //find a div where you want to add your dropzone
  document.getElementById("div_for_dropzone").appendChild(drop_zone);
  // this function will find the class="dropzone" tag and load it.
  Dropzone.discover();
}

然后在html中添加一个div,其中包含id="div_for_dropzone"

ffx8fchx

ffx8fchx4#

动态创建dz元素:

var d='<div id="dzFormDiv">';
d+='  <form ';
d+='      class="dropzone"';
d+='      id="my-awesome-dropzone">';
d+='      <input type="hidden" id="dztoken" name="dztoken">  ';
d+='      <input type="hidden" id="dzt2" name="dzt2"> ';
d+='  </form>   ';
d+='  <div id="dsbw">';
d+='    <button id="btnRemoveAlldz">clear</button>';
d+='  </div>    ';
d+='</div> ';

附加到div某处

$("#uploads").prepend(d);

启动示例

myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { url: "../cgi/newUploader.exe"});

添加选项

Dropzone.options.myAwesomeDropzone = {
   init: function () {
        var myDropZone = this;
        $("#btnRemoveAlldz").click(function () {                                    
                    myDropZone.removeAllFiles();
                }
        );            
                    myDropZone.on("complete", function (file) {
          if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
             consol.log("completed upload");
          }
        });
                    myDropZone.on("sending", function (file) {                            
                            // do something before uploading
        });

    },
       error: function(){
         // call error handling function
       },
       success: function(file,r){
          // called after EACH successfull upload
            file.previewElement.classList.add("dz-success");        
            if(r.indexOf("ok")>-1){                 
                console.log("success");
              }else{
                console.log(r);
              }        
       }     
    };
ve7v8dk2

ve7v8dk25#

有点晚了,但他们考虑了一下。正如文档的用法部分所述:
或者,您可以通过示例化Dropzone类以编程方式创建拖放区(即使在非表单元素上也是如此

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

您可能必须手动创建元素并设置某些属性。

var form = document.createElement('form');
form.classList.add('dropzone');
form.method = 'post';
form.action = '/file/post';
document.getElementById('parent').appendChild(form);
new Dropzone(form);

如果不使用表单元素,请不要忘记指定url选项,因为如果没有action属性,Dropzone不知道要发布到哪里。

相关问题