動態添加 dropzone.js div 元素到表單

Question

我必須使用多個 dropzone 區域來上傳圖像。 我使用 jQuery append() function 來動態創建 div。

問題是動態創建的 dropzone 未初始化，因此無法正常工作。

Answer 1

只要確保在新添加的元素上調用插件即可 。 問題是該插件僅附加到最初存在的元素上。

因此，在添加元素之后再次調用該插件，這樣它將被附加並可以再次使用。

Answer 2

這是我曾經使用過的腳本。 我通過使用querySelector更改了動態創建的輸入類型文本的名稱字段。 querySelector返回具有自定義屬性的元素的引用，這些屬性已使用data-tagline 。

 Dropzone.options.myDropzone = { init: function() { this.on("addedfile", function(file) { _ref = file.previewTemplate.querySelector('[data-tagline]'); _ref.name = "This is my New name attribute of element"; }) }, previewTemplate:"<div class=\\"dz-preview dz-file-preview\\">\\n "+ "<div class=\\"dz-details\\">\\n "+ "<div class=\\"dz-filename\\"><span data-dz-name></span></div>\\n "+ "<div class=\\"dz-size\\" data-dz-size></div>\\n "+ "<img data-dz-thumbnail class=\\"img-responsive img-thumbnail\\" />\\n "+ "<input type=\\"text\\" data-tagline />"+ "</div>\\n "+ "<div class=\\"dz-progress\\">"+ "<span class=\\"dz-upload\\" data-dz-uploadprogress></span>"+ "</div>\\n "+ "<div class=\\"dz-success-mark\\"><span>✔</span>"+ "</div>\\n "+ "<div class=\\"dz-error-mark\\"><span>✘</span>"+ "</div>\\n "+ "<div class=\\"dz-error-message\\"><span data-dz-errormessage></span>"+ "</div>\\n"+ "</div>", }; 

 <div id="my-dropzone" class="dropzone" action="upload.php"></div> 

Answer 3

在您的腳本中，您需要一個 function 來為 dropzone 創建表單，然后執行 function 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 中，您只需要添加一個id="div_for_dropzone"的 div

Answer 4

動態創建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);
              }        
       }     
    };  

Answer 5

晚了一點，但是他們考慮了一下。 如文檔的用法部分所述：

另外，您可以通過實例化Dropzone類以編程方式（甚至在非表單元素上）創建dropzones

// 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選項，因為Dropzone不知道沒有action屬性的發布位置。