Javascript Dropzone.js-仅显示完整上传的进度

Javascript Dropzone.js-仅显示完整上传的进度,javascript,twitter-bootstrap,file-upload,upload,dropzone.js,Javascript,Twitter Bootstrap,File Upload,Upload,Dropzone.js,我正在使用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"><

我正在使用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>

$(文档).ready(函数(){
Dropzone.autoDiscover=false;
Dropzone.options.uploadFile={
init:函数(){
this.on(“success”,函数(文件,responseText){
appendChild(document.createTextNode(responseText));
});
此.on(“发送”,函数(文件){
$(“#tmp路径”).html(“”)
});
}
};
var myDropzone=newdropzone(#uploadFile){
url:“upload.php”
});
});
我试图实现的是,不再显示上传预览,因此它们不再是每个文件的预览,而是一个进度条,它显示完整上传的整个过程(如果有错误,可能只显示一个错误,否则不会显示每个项目)。我有什么办法可以做到这一点吗


编辑:可选的一点是在引导模式下显示此进度条,这样当您上传内容时,它不会改变站点上的任何内容

这有几个部分。首先,您希望避免为已排队或正在上载的项目使用任何预览模板。我认为dropzone需要某种对象,因此基本上可以通过将dropzone初始化中的previewTemplate选项设置为一个div来实现这一点,其中没有任何内容:

var myDropzone = new Dropzone("#uploadFile", {
    url: "upload.php",
    previewTemplate: "<div></div>"
});
然后,使用dropzone中的事件更新进度栏上的进度:

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

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

谢谢您的回答,但它似乎并没有隐藏所有内容,将预览模板设置为空div,仍然会为每个项目获取一行上载项目的路径。。。。你知道为什么吗?我的错,是我的代码中的一个错误(php文件上传文件),如果其余部分正常,我会给你回复的编辑:它工作得不完美,进度条的进度总是在跳跃,因为我还提供了上传文件夹的可能性,然后它总是意识到子文件夹中有更多的文件,然后进度又“向后跳”,等等。。。你知道我该怎么解决吗?嗯,我不确定。您可以看到是否有一种方法可以在项目完成排队之前不显示进度条,但我不知道是否有一种简单的方法可以仅在DropZone中的事件中显示进度条问题在于它似乎递归地通过文件夹并检测文件夹中的项目,但同时已经开始上载,所以,一旦所有文件排队,上传就已经完成了,你知道我的意思吗?
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
});