Dropzone.js는 파일 업로드를 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. 이미지 업로드 시, 파일을 드래그 앤 드롭하여 미리보기를 제공하고 싶다면, Dropzone.js를 사용하여 이 기능을 구현할 수 있습니다.

Dropzone.js 라이브러리 추가

먼저, Dropzone.js 라이브러리를 HTML 문서에 추가해야 합니다. CDN을 통해 라이브러리를 추가할 수 있습니다.

<link href="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/min/dropzone.min.js"></script>

HTML 구조 생성

이미지를 미리보기할 영역을 정의하기 위해 HTML 구조를 생성합니다.

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

JavaScript로 Dropzone 설정

Dropzone를 초기화하고 이미지를 미리보기할 수 있도록 JavaScript에서 Dropzone를 설정합니다.

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // 폼 데이터로 전송될 파일 이름
  maxFilesize: 2, // 최대 파일 크기 제한 (MB 단위)
  previewsContainer: ".dropzone-previews", // 미리보기를 표시할 컨테이너
  acceptedFiles: "image/*", // 허용할 파일 유형 (이미지만 허용)
  addRemoveLinks: true // 파일 제거 링크 추가
};

결과 확인

이제 웹 페이지를 열고 이미지 파일을 Dropzone 영역에 드래그 앤 드롭하면, 이미지의 미리보기가 표시될 것입니다.

Dropzone.js를 사용하면 이미지 미리보기 기능을 간단하게 구현할 수 있습니다. 더 많은 옵션과 기능에 대해 알아보려면 Dropzone.js 공식 문서를 참고하세요.

참고 문서:

• Dropzone.js 공식 문서