JavaScript를 사용하여 최대 파일 크기를 확인하는 방법

2022-10-04 last update

5 minutes reading file size upload javascript

안녕하세요 친구,

이 게시물에서는 javascript를 사용하여 최대 파일 크기를 확인하는 데 도움을 드리겠습니다. 서버에 업로드하기 전에 파일의 최대 크기를 확인해야 하는 경우가 많습니다. 그래서 자바 스크립트를 사용하여 최대 파일 크기를 확인하는 방법에 대한 게시물을 만들었습니다.

javascript 또는 jquery를 사용하여 최대 파일 크기 가져오기를 구현하는 것은 매우 간단합니다.

하나의 블레이드 파일을 만들고 jquery의 if 조건을 사용하여 파일 크기를 확인합니다. 자바 스크립트에서 변경 이벤트에서 파일을 확인하고 변경 이벤트에서 파일을 가져옵니다.

그 후 파일 크기를 얻은 다음 파일 크기가 최대인지 여부를 확인한 다음 파일 크기에 따라 메시지를 표시합니다. 파일 크기가 최대인 경우 "파일 업로드 크기가 2MB보다 큽니다"를 표시하고 그렇지 않으면 아무 것도 표시하지 않습니다.

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload size validation in javascript - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload size validation in javascript - websolutionstuff.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      for(var i=0; i< $(this).get(0).files.length; ++i){
        var file1 = $(this).get(0).files[i].size;
        if(file1){
          var file_size = $(this).get(0).files[i].size;
          if(file_size > 2000000){
            $('#error-message').html("File upload size is larger than 2MB");
            $('#error-message').css("display","block");
            $('#error-message').css("color","red");
          }else{
            $('#error-message').css("display","none");
          }
        }
      }
    });
  });
</script>

그리고 다음과 같은 출력을 얻을 것입니다.

Read Also : How To Delete Multiple Records Using Checkbox In Laravel