[javascript] Dropzone.js에서 파일 업로드 프로그레스 바를 표시하는 방법은 무엇인가요?

18 Dec 2023

javascript

먼저, Dropzone.js를 초기화하고 파일이 업로드되는 동안 프로그레스 바를 표시하고 싶은 HTML 요소를 준비합니다. 그 다음으로, Dropzone의 uploadprogress 이벤트를 활용하여 파일 업로드의 진행 상황을 감지하고 프로그레스 바를 업데이트합니다.

아래는 파일 업로드 프로그레스 바를 표시하는 Dropzone.js의 간단한 예제 코드입니다.

// HTML
<div id="myDropzone" class="dropzone">
  <div class="dz-message" data-dz-message><span>Drop files here to upload</span></div>
</div>

// JavaScript
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
  url: "/file-upload",
  init: function() {
    this.on("uploadprogress", function(file, progress, bytesSent) {
      // 파일 업로드 프로그레스가 갱신될 때 프로그레스 바를 업데이트하는 로직
      var progressBar = file.previewElement.querySelector(".dz-upload");
      progressBar.style.width = progress + "%";
    });
  }
});

이 코드에서는 uploadprogress 이벤트 콜백을 사용하여 파일 업로드가 진행됨에 따라 프로그레스 바의 너비를 조정하는 방법을 보여줍니다.

더 많은 자세한 정보는 Dropzone.js 공식 문서를 참고하시기 바랍니다. Dropzone.js 공식 문서