Dropzonejs顯示文件數

我在我正在使用的網站上使用dropzonejs，到目前爲止它工作正常。但是，我想顯示dropzone區域下方的文件數量，以便用戶可以看到它們添加了多少個文件。我也使用一個按鈕來控制myDropzone.processQueue。Dropzonejs顯示文件數

我遇到的問題是我無法獲得id = output段落中顯示的添加文件總數。

這當然是由於我是一個新手，當談到JS，但我已經嘗試在腳本中設置變量在不同的「地方」，無濟於事。

這裏是我的代碼至今：

<link rel="stylesheet" type="text/css" href="css/dropzone.css"> 
<link rel="stylesheet" type="text/css" href="css/sweetalert.css"> 
<script src="js/dropzone.js"></script> 
<script src="js/sweetalert.min.js"></script> 

<script> 

Dropzone.options.myDropzone = { 


    // Prevents Dropzone from uploading dropped files immediately 
    autoProcessQueue: false, 


    init: function() { 
    var submitButton = document.querySelector("#submit-all"); 
     myDropzone = this; // closure 

    submitButton.addEventListener("click", function() { 
     myDropzone.processQueue(); // Tell Dropzone to process all queued files. 
    }); 

    // You might want to show the submit button only when 
    // files are dropped here: 
    this.on("addedfile", function() { 
     // Show submit button here and/or inform user to click it. 
    var count = myDropzone.files.length; 
    }); 



      this.on("success", function() { 

       myDropzone.options.autoProcessQueue = true; 
      }); 


      this.on("queuecomplete", function (file) { 



        setTimeout(function() { 
      swal({ 
       title: "Thank you!", 
       text: "Your upload is complete", 
       type: "success", 
       confirmButtonText: "Ok" 
      }, function() { 
       window.location = "index.html"; 
      }, 1000); 
     }); 


      }); 
    } 
}; 
</script> 

<form action="send.php" class="dropzone" id="my-dropzone"></form> 

<p id="output"></p> 

<script> 
document.getElementById("output").innerHTML = count; 
</script>

來源

2017-07-22 Marcus Erlandsson

你可以像這樣'myDropzone.getAcceptedFiles（）length' – Muhammad

是的，我很抱歉對於這個愚蠢的問題，但是我在代碼中如何以及在哪裏實現？這就是讓我困惑的原因。謝謝！ –

看到我的回答https://stackoverflow.com/a/45257864/1966247 – Muhammad

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/basic.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script> 
 

 

 
<form action="send.php" class="dropzone" id="my-dropzone"></form> 
 
<p id="output">output</p> 
 

 
<script> 
 
Dropzone.autoDiscover = false; 
 
var myDropzone = new Dropzone("#my-dropzone"); 
 

 
    myDropzone.on("addedfile", function(file) { 
 
    \t 
 
    \t var count = myDropzone.getAcceptedFiles().length; 
 
     output = document.getElementById('output'); 
 
     output.innerText = count; 
 
    }); 
 

 
</script>

來源

2017-07-22 18:29:22 Muhammad

Dropzonejs顯示文件數

回答

相關問題