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

18 Dec 2023

javascript

아래는 Dropzone.js를 사용하여 파일 업로드 시 Ajax 요청을 설정하는 간단한 예제입니다.

먼저, HTML 파일에 Dropzone.js를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Dropzone 파일 업로드</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" />
</head>
<body>
  <form action="/file-upload" class="dropzone" id="my-dropzone"></form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
  <script>
    // Dropzone 설정 및 Ajax 요청 설정
    Dropzone.options.myDropzone = {
      url: "/file-upload",
      paramName: "file", // 서버로 전송될 때 사용할 파일 매개변수 이름 지정
      maxFilesize: 2, // 최대 파일 크기 제한 (MB)
      acceptedFiles: ".jpg, .png, .gif", // 허용할 파일 형식 지정
      init: function() {
        this.on("success", function(file, response) {
          console.log(response); // 업로드 완료 후 서버로부터의 응답 로깅
        });
      }
    };
  </script>
</body>
</html>

이 예제에서는 Dropzone.js를 사용하여 파일 업로드 폼을 만들고, /file-upload로 파일을 업로드하기 위한 Ajax 요청을 설정하고 있습니다. 이때 url, paramName, maxFilesize, acceptedFiles 등의 옵션을 통해 필요한 설정을 지정할 수 있습니다.

이렇게 구현하면 Dropzone.js를 사용하여 파일 업로드 시 Ajax 요청을 쉽게 설정할 수 있습니다.

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