[javascript] Dropzone.js를 사용하여 파일 업로드 기능을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

먼저, Dropzone.js 라이브러리를 웹 페이지에 추가합니다. 다음은 HTML 파일에서 Dropzone.js를 추가하는 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>파일 업로드</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css">
</head>
<body>
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
</body>
</html>

위의 예시에서는 <link> 태그를 사용하여 Dropzone.js의 CSS 파일을 추가하고, <script> 태그를 사용하여 Dropzone.js의 JavaScript 파일을 추가하고 있습니다. 또한, 파일을 업로드할 <form> 요소에 dropzone 클래스를 추가하여 Dropzone.js를 초기화하고 있습니다.

그 다음으로, Dropzone.js를 초기화하고 옵션을 설정합니다. 다음은 JavaScript 파일에서 Dropzone.js를 초기화하고 URL을 설정하는 예시입니다.

Dropzone.autoDiscover = false;

document.addEventListener("DOMContentLoaded", function() {
  var myDropzone = new Dropzone("#my-awesome-dropzone", {
    url: "/file-upload"
  });
});

위의 예시에서 Dropzone.autoDiscover를 false로 설정하여 자동으로 Dropzone 인스턴스가 초기화되지 않도록 하고, new Dropzone()를 사용하여 Dropzone 인스턴스를 수동으로 초기화하고 있습니다. 또한, URL 옵션을 통해 파일이 업로드될 서버의 엔드포인트를 설정하고 있습니다.

이렇게 하면 Dropzone.js를 사용하여 파일 업로드 기능을 구현할 수 있습니다. 필요에 따라 Dropzone.js의 다양한 옵션을 추가하여 더욱 풍부한 파일 업로드 기능을 구현할 수 있습니다.

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