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

18 Dec 2023

javascript

먼저, Dropzone 인스턴스를 초기화하고 업로드를 처리할 HTML 요소를 지정합니다.

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

// JavaScript
Dropzone.options.myDropzone = {
  paramName: "file", // 파일 이름
  url: "/upload", // 업로드 URL
  method: "post", // HTTP 메서드
  maxFilesize: 5, // 최대 파일 크기 제한
  acceptedFiles: ".jpg,.png,.gif", // 허용할 파일 형식
  autoProcessQueue: false, // 자동으로 큐 처리 여부
  init: function() {
    this.on("addedfile", function(file) {
      // 파일이 추가될 때 처리할 내용
    });
    this.on("sending", function(file, xhr, formData) {
      // Ajax 요청 설정
      formData.append("additionalParam", "value"); // 추가적인 데이터 전송
    });
    this.on("success", function(file, response) {
      // 업로드 성공 시 처리할 내용
    });
  }
};

위 예제에서 sending 이벤트 핸들러에서는 Ajax 요청을 설정할 수 있습니다. formData 매개변수를 사용하여 추가적인 데이터를 전송할 수 있습니다. 파일과 함께 전송해야 할 추가적인 매개변수를 설정하려면 formData.append()를 사용합니다.

이제 Dropzone.js를 사용하여 파일 업로드 시 Ajax 요청을 설정할 수 있게 되었습니다!