내 사이트에 이미지를 표시하기 위해 Dropzone.js를 사용하고 있습니다.autoProcessQueue가 거짓 일 때 진행 표시 줄이 작동하지 않습니다.
멋지게 작동하지만 한 가지 문제가 있습니다.
Dropzone이 submit 버튼을 누르지 않아도 자동으로 이미지 정보를 보내는 것을 본 후, autoProcessQueue를 false로 설정했습니다.
이제 자동으로 정보를 보내지 않지만 진행률 표시 줄은 아래 그림과 같이 끊어집니다.
이미지에 흰색 선이있는 것 같습니다 그리고 그것은 좋은 보이지 않는다.
진행률 표시 줄과 비슷한 문제가있었습니다. 나는 내 솔루션에서도 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 -->
그리고 여기 내 자바 스크립트 코드 :
Dropzone.autoDiscover = false;
var {{$name or 'upload'}} = new Dropzone("div#{{$name or 'upload'}}", {
url: "{{ action("[email protected]") }}"
, 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();
}
});
당신은 잘못된 이벤트 진행 표시 줄을 바인더 제본이
이 내 템플릿입니다. uploadProgress을 uploadprogress으로 바꿉니다.
doc 여기에 있습니다 : http://www.dropzonejs.com/#event-uploadprogress