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

18 Dec 2023

javascript

먼저, Dropzone.js를 HTML 문서에 추가합니다. 이를 위해 CDN을 사용하거나 프로젝트에 패키지를 설치하여 사용할 수 있습니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

다음으로, Dropzone 인스턴스를 초기화하고 파일이 추가되었을 때 실행할 코드를 작성합니다.

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

그런 다음, 파일을 전송할 때 Ajax 요청을 설정합니다. 이를 위해 Dropzone의 sending 이벤트를 사용하여 Ajax 요청을 수행합니다.

Dropzone.options.myDropzone = {
  url: "/file-upload",
  sending: function(file, xhr, formData) {
    // 파일을 전송하기 전에 필요한 작업을 수행합니다. 예를 들어, 헤더를 설정하거나 FormData에 추가할 수 있습니다.
    formData.append("key", "value");
  },
  success: function(file, response) {
    // 파일 전송이 성공한 경우에 실행할 코드
  },
  error: function(file, message) {
    // 파일 전송이 실패한 경우에 실행할 코드
  }
};

이제 Dropzone를 사용하여 파일을 업로드할 때 Ajax 요청을 설정할 수 있습니다. 위의 코드를 사용하여 Dropzone.js를 통해 파일 업로드와 Ajax 요청을 손쉽게 관리할 수 있습니다.

더 자세한 내용은 Dropzone.js 공식 문서를 참고하시기 바랍니다.