Question

我正在使用dropzonejs在我工作的网站上，到目前为止它工作正常。但是，我想显示dropzone-area下面的文件数，以便用户可以看到他们添加了多少文件。我也使用一个按钮来控制myDropzone.processQueue。

我遇到的问题是，我无法获得ID = output的段落中显示的已添加文件总数。

这肯定是因为我是JS的新手，但我已经尝试将变量设置在不同的地方＆＃34;在剧本中，无济于事。

这是我到目前为止的代码：

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

Answer 1

＆＃13;

<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) { 
    	
    	var count = myDropzone.getAcceptedFiles().length;
      output = document.getElementById('output');
      output.innerText = count;
    });

</script>

＆＃13;

Dropzonejs显示文件计数

1 个答案: