자바 스크립트에서 파일 업로드 유효성 검사

3438 단어
웹 응용 프로그램에서 보안 관점에서 파일 유효성 검사는 특히 파일 업로드를 수행할 때 각 개발자가 고려해야 하는 가장 중요한 매개 변수입니다. 유효성 검사는 클라이언트 측이나 서버 측 또는 둘 다일 수 있습니다.

이 문서에서는 서버에 업로드하기 전에 파일 형식(확장자) 및 파일 크기를 확인하는 방법을 보여줍니다. 이 데모는 자바스크립트를 사용한 클라이언트 측 유효성 검사에 대해 표시됩니다.

파일 형식(확장자) 유효성 검사



Javascript를 사용하면 허용된 파일 형식으로 파일 확장자를 추출하여 파일 형식을 쉽게 확인할 수 있습니다.

파일 형식 검증의 예



다음은 파일 형식 유효성 검사에 대한 샘플 예입니다. 이 예에서는 확장자가 .jpeg/.jpg/.png/.gif인 파일만 업로드합니다. 업로드 버튼 클릭 시 호출될 자바스크립트 함수 validateFileType()을 정의할 것입니다.

<!DOCTYPE html>
<html>  
<head>
    <title>
        File type validation while uploading using JavaScript
    </title>
    <style>
        body{
            text-align:center;
        }
    </style>
</head>  
<body>  
    <h1>File type validation while uploading using JavaScript</h1>  
    <p>Upload an image (.jpg,.jpeg,.png,.gif)</p>

    <!-- input element to choose a file for uploading -->
    <input type="file" id="file-upload" />
    <br><br>

    <!-- button element to validate file type on click event -->
    <button onclick="validateFileType()">Upload</button>

    <script>

    /* javascript function to validate file type */
    function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
            alert("Please choose a file first...");
            return false;
        }else{
            var filename = files[0].name;

            /* getting file extenstion eg- .jpg,.png, etc */
            var extension = filename.substr(filename.lastIndexOf("."));

            /* define allowed file types */
            var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

            /* testing extension with regular expression */
            var isAllowed = allowedExtensionsRegx.test(extension);

            if(isAllowed){
                alert("File type is valid for the upload");
                /* file upload logic goes here... */
            }else{
                alert("Invalid File Type.");
                return false;
            }
        }
    }
    </script>
</body>  
</html>


샘플 포인트를 사용하여 위의 코드 구현을 이해합시다.
  • HTML 요소는 업로드할 파일을 선택하기 위해 type="file"속성으로 정의됩니다.
  • HTML 요소는 업로드 전에 파일 형식을 확인하기 위해 클릭 이벤트에서 validateFileType() 함수를 호출하도록 정의됩니다.
  • validateFileType() 내부에서 javascript 함수 getElementById()를 호출하여 inputElement를 가져옵니다.
  • inputElement.files를 사용하여 파일 객체를 가져옵니다.
  • files.length를 사용하여 사용자가 파일을 선택했는지 여부를 확인합니다.
  • files[0].name을 사용하여 확장자가 있는 파일 이름을 가져옵니다(예: wallpager.png).
  • 허용되는 파일 형식(.JPG, .JPEG, .PNG, .GIF만 해당)으로 일반 표현식 allowedExtensionsRegx 변수를 정의합니다.
  • test() 함수를 사용하여 파일 형식이 허용되는지 여부를 확인합니다. 부울 값 true 또는 false를 반환합니다.

  • 시사





    자세히 알아보기: https://javacodepoint.com/file-upload-validations-in-javascript/

    좋은 웹페이지 즐겨찾기