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

Question

您好，我正在使用 [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>

Answer 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++;
    }   
}

希望对您有所帮助。

Answer 2

是的，这是可能的。你需要听点击事件。在单击事件中，您必须在文件输入时初始化拖放区。 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" });

如果您想通过点击事件创建拖放区，这非常简单，请执行以下操作：

// 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>

这行得通。你可以按照你想要的方式改变它。

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

Is it possible to add dropzone form by onclick javascript

html

javascript

jquery

dropzone.js