[javascript] Dropzone.js를 사용하여 파일 업로드 시 Ajax 요청 설정 방법은 무엇인가요?

18 Dec 2023

javascript

먼저, Dropzone.js를 HTML 페이지에 추가합니다. 그런 다음 JavaScript에서 Dropzone 인스턴스를 초기화하고 Ajax 요청을 구성할 수 있습니다. 다음은 간단한 예제 코드입니다.

// HTML
<form action="/file-upload" class="dropzone" id="myDropzone"></form>

// JavaScript
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
  url: "/upload-url",
  paramName: "file",  // 파일 파라미터 이름
  method: "post",     // HTTP 메서드 (기본값: "post")
  maxFilesize: 5,     // 최대 파일 크기 (MB 단위)
  acceptedFiles: ".png, .jpg, .jpeg, .gif",  // 허용된 파일 유형
  addRemoveLinks: true,  // 파일 제거 링크 표시 여부
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      // 파일을 보낼 때 추가적인 데이터를 포함시키려면 이곳에 로직을 추가합니다.
      formData.append("key", "value");  // 예시: 헤더나 다른 폼 데이터 추가
    });
    this.on("success", function(file, response) {
      // 파일 전송이 성공했을 때의 동작을 정의합니다.
    });
    this.on("error", function(file, message) {
      // 파일 전송이 실패했을 때의 동작을 정의합니다.
    });
  }
});

위의 코드에서 #myDropzone는 Dropzone을 초기화할 폼의 ID입니다. url 속성은 파일을 업로드할 서버 엔드포인트의 URL을 지정합니다. sending 이벤트를 사용하여 Ajax 요청 전에 추가적인 데이터를 포함할 수 있습니다.

이 예제 코드를 참고하여 Dropzone.js를 사용하여 파일 업로드와 Ajax 요청을 설정할 수 있습니다. 필요에 따라 파일 업로드 후의 추가 동작을 구현할 수 있습니다.