是否有可能通過onclick添加dropzone表單javascript

你好我正在與[dropzone.js]（拖放文件庫）我想用戶可以點擊一些按鈕和Dropzone表單將被添加。（我已經有1個dropzone表單，用戶點擊添加後，將會顯示第二個Dropzone表單。）是否有可能通過onclick添加dropzone表單javascript

但是我的問題是點擊添加按鈕後，dropzone表單添加成功，但無法上傳文件。我應該如何使它像第一個Dropzone表單一樣上傳？ （哦，如果我正常寫第二個dropzone表單，它可以正常工作，但是如果onclick添加第二個dropzone表單則不起作用。）

這是我的代碼。

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

來源

2016-12-05 doflamingo

如果我正常編寫第二個表單，它會正常工作，但是通過onclick事件添加表單，它不能上載，您需要爲運行時添加的每個表單初始化dropzone –

。 – doflamingo

更改您的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++; 
    } 
}

我希望這會有所幫助。

來源

2016-12-05 10:31:47

是的，這是可能的。你需要聽點擊事件。在點擊事件中，您必須初始化文件輸入上的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。您的懸浮窗創建化妝格後可見

例如：

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

這會工作。你可以用你想要的方式改變它。

來源

2016-12-05 10:39:19

是否有可能通過onclick添加dropzone表單javascript

回答

相關問題