[javascript] Dropzone.js를 사용하여 파일 업로드 시 이미지 파일 크기 제한 설정 방법은 무엇인가요?

18 Dec 2023

javascript

예를 들어, 최대 파일 크기를 2MB로 제한하려면 Dropzone 초기화 코드에 maxFilesize 옵션을 추가하면 됩니다.

아래는 Dropzone.js를 사용하여 이미지 파일 크기를 제한하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Dropzone 파일 업로드</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">
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
  </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
  <script>
    // Dropzone 초기화
    Dropzone.options.myDropzone = {
      maxFilesize: 2, // 최대 파일 크기 설정 (MB 단위)
    };
  </script>
</body>
</html>

이렇게 하면 사용자가 2MB 이상의 이미지 파일을 업로드하려고 하면 Dropzone.js가 해당 파일을 거부하게 됩니다.

참고 문헌:

https://www.dropzonejs.com/#configuration-options