是否可以通过 onclick javascript 添加 dropzone 表单答案

【问题标题】：Is it possible to add dropzone form by onclick javascript是否可以通过 onclick javascript 添加 dropzone 表单
【发布时间】：2016-12-05 09:55:51
【问题描述】：

您好，我正在使用[dropzone.js]（拖放文件库）我希望用户可以单击某个按钮并添加 Dropzone 表单。（我已经有 1 个 dropzone 表单，用户点击添加后，将显示第二个 Dropzone 表单。）

但我的问题是单击添加按钮后，dropzone 表单添加成功但无法上传文件。我应该怎么做才能让它像第一个 Dropzone 表单一样上传？ （哦，如果我正常编写第二个 dropzone 表单，它可以正常工作。但如果 onclick 添加第二个 dropzone-form 则不起作用。）

这是我的代码。

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>

<script>
count=2;
function add_ptg_input()   //onclick to add dropzone-form function
{ if(count<50)
    {
    var newspan = document.createElement('span');
    newspan.innerHTML = '<form id="uploadfree" class="dropzone dz-clickable" action="test2.php" method="post" style="width:400px;" > \
  <div class="dropzone-previews"></div> \
     <input type="text" name="free" /> \
    <button type="submit">Submit data and files!</button> \
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div> \
    </form> ';
    document.getElementById('add_ptg').appendChild(newspan);

    count++;
    }   
}
</script>

<script>
  //Just a config to make dropzone can use with other form input 


    Dropzone.options.uploadfree = {

  autoProcessQueue: false,
  parallelUploads: 100,
  maxFiles: 100,

  init: function() {
    var myDropzone = this;

    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    this.on("sendingmultiple", function() {
    });
    this.on("successmultiple", function(files, response) {
    });
    this.on("errormultiple", function(files, response) {
    });
  }
}


</script>
</head>

...

     <body>
            <a href="javascript:void(0);" onClick="add_ptg_input();" style="position:absolute; margin-left:10px;">Add</a>
            <div id="add_ptg">
            <form id="uploadfree" class="dropzone" action="test2.php" method="post" style="width:400px;" >
              <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->

              <!-- Now setup your input fields -->
              <input type="text" name="free" />
              <button type="submit">Submit data and files!</button>
            </form>

    <!-- if I write the second form normally, it work fine, but by onclick event to add form, it cannot upload. 
<form id="uploadfree" class="dropzone" action="test2.php" method="post" style="width:400px;" >
              <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->

              <!-- Now setup your input fields -->
              <input type="text" name="free" />
              <button type="submit">Submit data and files!</button>
            </form> -->

            </div>

            </body>
            </html>

【问题讨论】：

您需要为运行时添加的每个表单初始化 dropzone
如果我正常写第二个表单，它工作正常，但是通过onclick事件添加表单，它无法上传。

标签： javascript jquery html dropzone.js

【解决方案1】：

像这样改变你的 add_ptg_input() 函数。您只需要在新创建的表单上初始化 dropzone。

function add_ptg_input()   
{ 
    if(count<50)
    {
        var newspan = document.createElement('span');
        newspan.innerHTML = '<form id="uploadfree2" class="dropzone dz-clickable" action="test2.php" method="post" style="width:400px;" > \
        <div class="dropzone-previews"></div> \
         <input type="text" name="free" /> \
        <button type="submit">Submit data and files!</button> \
        <div class="dz-default dz-message"><span>Drop files here to upload</span></div> \
        </form> ';
        // initilize dropzone for newly added form
        $(newspan).find("form").dropzone();
        document.getElementById('add_ptg').appendChild(newspan);
        count++;
    }   
}

我希望它会有所帮助。

【讨论】：

【解决方案2】：

是的，这是可能的。你需要听点击事件。在单击事件中，您必须在文件输入时初始化 dropzone。 dropzone 能够进行多次上传和其他功能。

不要在页面加载时初始化dropzone，而是在你想要的按钮的点击事件中初始化它。

还有其他方法，您可以通过编程方式创建 dropzone

这是一个例子

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

or if you use jQuery, you can use the jQuery plugin Dropzone ships with:
// jQuery
$("div#myId").dropzone({ url: "/file/post" });

如果你想通过点击事件创建dropzone，这很简单：

// jQuery
$('your selector').click(function(event){
     $('dropzone selector').dropzone({ url: "/file/post" });
})

您可以创建一个 div 并为其指定一个 Id 并使其隐藏并在其上初始化 dropzone。创建 dropzone 后，让 div 可见

例如：

<div id="mydiv" class="hidden"> </div>
<a class="btn-dropzon-cre">create dropzone</a>
<style> .hidden{display:none;}</style>

<script>
  var dropzoneCreationFlag=false;

  $('.btn-dropzon-cre').click(function(event){

     if(!dropzoneCreationFlag)
       {
         dropzoneCreationFlag=true;
        $('#mydiv').removeClass('hidden').dropzone({ url: "/file/post" });
       }
   })
</script>

这会奏效。并且你可以用你想要的方式改变它。

【讨论】：