当 autoProcessQueue 为 false 时，进度条不起作用答案

【问题标题】：Progress bar not working when autoProcessQueue is false当 autoProcessQueue 为 false 时，进度条不起作用
【发布时间】：2016-06-21 11:16:34
【问题描述】：

我正在使用 Dropzone.js 在我的网站上显示图像。

效果很好，但是有一个问题。

在我意识到 Dropzone 自动发送图像信息而无需用户按下提交按钮后，我将 autoProcessQueue 设置为 false。

现在，它不会自动发送信息，但进度条坏了，如下图所示。

图像上似乎有一条白线，看起来不太好。

【问题讨论】：

标签： dropzone.js

【解决方案1】：

我在进度条上遇到了类似的问题。我也在我的解决方案中使用 twitter-bootstrap 和 jQuery。这个带有进度条的解决方案对我来说很好用（参见 id 为 total-progress 的元素）。

这是我的模板：

<!-- Upload preview template begin -->
<div id="preview-template" style="display: none;">
    <div class="dz-preview dz-file-preview" style="display:inline-block;margin:10px;">
        <div class="dz-details">
            <div class="dz-filename label label-primary">
                <span data-dz-name></span>
            </div>
            <br style="line-height:2px;" />
            <div class="dz-error-message label label-danger" style="display:none;clear:both;">
                <span data-dz-errormessage></span>
            </div>
            <br style="line-height:2px;" />
            <!--<div class="dz-size" data-dz-size></div>-->
            <img data-dz-thumbnail style="border-radius:5px;clear:both;" />
        </div>
        <!--<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>-->
        <!-- <div class="dz-success-mark"><span>?</span></div> -->
        <!-- <div class="dz-error-mark"><span>?</span></div> -->
        <div data-dz-remove class="btn btn-default removePicFromAlbum" title="Entfernen"><span class="glyphicon glyphicon-remove center-block" aria-hidden="true"></span></div>
        <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:100px;">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
        <!--<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />-->
    </div>
</div>
<!-- Upload preview template end -->

这是我的 Javascript 代码：

Dropzone.autoDiscover = false;
var {{$name or 'upload'}} = new Dropzone("div#{{$name or 'upload'}}", {
    url: "{{ action("$controllerClass@store") }}"
    , method: "post"
    , paramName: "file" // The name that will be used to transfer the file
    , maxFilesize: {{$maxFilesize or str_replace('M','',ini_get('upload_max_filesize')) }} // MB
    , uploadMultiple: false
    , dictDefaultMessage: "{{$text or 'Ziehen Sie Dateien in diesen Bereich, um diese hochzuladen'}}"
    , previewTemplate: document.getElementById('preview-template').innerHTML
    //, acceptedFiles:'image/*'
    , previewsContainer: '#logoPreview'
    , thumbnailWidth: {{$thumbnailWidth or 100}}
    , thumbnailHeight: {{$thumbnailHeight or 100}}
    , sending: function (file, xhr, formData) {
        formData.append('_token', '{!!csrf_token() !!}');
    }
    , success: function(file, responseText) {
        if(responseText != undefined) {
            if (responseText.success != undefined && responseText.success == "false") {
                $(file.previewElement).find('.dz-error-message').text("Fehler: " + responseText.errorMessage);
                $(file.previewElement).find('.dz-error-message').css('display','inline-block');
            }
            else {
                $(file.previewElement).find('.dz-error-message').css('display','none');
            }
        }
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , error: function(file, message, xhr) {
        var header = "Error " + xhr.status + ": " + xhr.statusText;
        $(file.previewElement).find('.dz-error-message').text(header);
        $(file.previewElement).find('.dz-error-message').css('display','inline-block');
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , uploadProgress: function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    }
    , completed: function(progress) {
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , removedfile: function(file) {
        removeFile(file.name);
        $(file.previewElement).remove();
    }

    });

【讨论】：

【解决方案2】：

您将进度条绑定到错误的事件。将uploadProgress 替换为uploadprogress。

文档在这里：http://www.dropzonejs.com/#event-uploadprogress

【讨论】：

如果autoProcessQueue to false 那么uploadprogress 应该是totaluploadprogress

【解决方案3】：

这篇文章可能很旧，但我得到了简单的答案。所以我在这里为任何需要帮助的人发帖。

删除 autoProcessQueue: false 并设置 url: "#"。当你设置 url:"#" 时，dropzone 不能自动处理，但 autoProcessQueue: true (默认) 将有助于触发动画

这种方式对我有用

Dropzone.options.dropzoneForm = {
                addRemoveLinks: true,
                url: "#",
                init: function () {

                }
            };

【讨论】：