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>"
});

另一部分是进度条。为此，您可以为addedfile 添加一个事件监听器来创建您的进度条

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
});

希望这会为您指明正确的方向。当然还需要进行其他清理，例如何时隐藏总进度条等。