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显示文件数

回答

相关问题