Dropzone.js-僅顯示完整上傳的進度

Question

我正在使用dropzone.js將文件上傳到服務器。 文件就是這樣的：

<div id="full_site">
    <form id="uploadFile" method="post" name="uploadFile" action="upload.php"
          class="dropzone needsclick dz-clickable full-height">
        <span id="tmp-path"></span>
        <div class="dz-message"><b></b></div>
    </form>
</body>


<script>
    $(document).ready(function () {
        Dropzone.autoDiscover = false;

        Dropzone.options.uploadFile = {
            init: function () {
                this.on("success", function (file, responseText) {
                    file.previewTemplate.appendChild(document.createTextNode(responseText));
                });

                this.on("sending", function (file) {
                    $("#tmp-path").html('<input type="hidden" name="path" value="' + file.fullPath + '" />')
                });
            }
        };

        var myDropzone = new Dropzone("#uploadFile", {
            url: "upload.php"
        });
    });
</script>

我想要實現的是，不再顯示任何上傳預覽，因此不再顯示每個文件的預覽，而是顯示進度條，該進度條顯示了完整上傳的整個過程（可能僅顯示錯誤，如果存在是一個，但不顯示每個項目）。 有什么辦法可以實現？

編輯 ：可選點是以引導程序模式顯示此進度欄，因此當您上傳內容時，它不會更改網站上的任何內容。

Answer 1

有兩個部分。 首先，您要避免為已排隊或正在上載的項目提供任何預覽模板。 我認為dropzone需要某種對象，因此基本上可以通過將dropzone初始化中的PreviewTemplate選項設置為div而不包含任何內容來完成此操作：

var myDropzone = new Dropzone("#uploadFile", {
    url: "upload.php",
    previewTemplate: "<div></div>"
});

另一部分是進度條。 為此，您可以為添加文件添加事件監聽器以創建進度條

myDropzone.on("addedfile", function (file) {
     // Build progress bar here
});

然后，使用dropzone中的totaluploadprogress事件來更新進度條上的進度：

myDropzone.on("totaluploadprogress", function(progress) {
    // Update progress bar with the value in the variable "progress", which 
    // is the % total upload progress from 0 to 100
});

希望這為您指明了正確的方向。 當然，還需要進行其他清理，例如何時隱藏總進度條等。