[javascript] 자바 스크립트 파일 업로드 크기 확인

JavaScript를 사용하여 파일 을 업로드하기 전에 파일 크기 를 확인하는 방법이 있습니까?

답변

예 . 일부 최신 브라우저 인 File API 에서 지원하는 W3C의 새로운 기능이 있습니다 . 이 용도로 사용할 수 있으며 지원되는지 여부를 테스트하고 필요하지 않은 경우 다른 메커니즘으로 폴백 (필요한 경우) 할 수 있습니다.

다음은 완전한 예입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

그리고 여기 에 작동합니다. 최신 버전의 Chrome 또는 Firefox에서 사용해보십시오.

약간의 주제를 벗어 났지만 클라이언트 측 유효성 검사는 서버 측 유효성 검사를 대체하지 않습니다 . 클라이언트 측 유효성 검사는 순전히 더 나은 사용자 경험을 제공 할 수 있도록합니다. 예를 들어, 5MB를 초과하는 파일 업로드를 허용하지 않는 경우 클라이언트 측 유효성 검사를 사용하여 사용자가 선택한 파일의 크기가 5MB를 넘지 않는지 확인하고 파일이 있으면 친절하게 메시지를 보낼 수 있습니다 (그들은 모든 시간의 업로드를 낭비하지 않도록 전용 서버에서 버려지는 결과를 얻을),하지만 당신은해야한다 또한 모든 클라이언트 측 한계 (및 기타 검증)을 회피 할 수 있기 때문에, 서버에서 그 한계를 적용합니다.

답변

jquery 사용 :

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>

답변

동적 및 정적 파일 요소에서 작동

자바 스크립트 전용 솔루션

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }

 <input onchange="ValidateSize(this)" type="file">

스 니펫 확장

답변

아니 예, 새로운 브라우저에서 파일 API를 사용하여. 자세한 내용은 TJ의 답변을 참조하십시오.

구형 브라우저도 지원해야하는 경우 SWFUpload 또는 Uploadify 와 같은 Flash 기반 업 로더를 사용해야합니다 .

SWFUpload는 데모 특징 어떻게 ‘쇼 file_size_limit설정이 작동합니다.

플래시가 필요하고 작동 방식은 일반 업로드 양식과 약간 다릅니다.

답변

꽤 간단합니다.

            var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

            if (oFile.size > 2097152) // 2 mb for bytes.
            {
                alert("File size must under 2mb!");
                return;
            }

답변

jQuery Validation을 사용하는 경우 다음과 같이 작성할 수 있습니다.

$.validator.addMethod(
    "maxfilesize",
    function (value, element) {
        if (this.optional(element) || ! element.files || ! element.files[0]) {
            return true;
        } else {
            return element.files[0].size <= 1024 * 1024 * 2;
        }
    },
    'The file size can not exceed 2MB.'
);

답변

나는 그런 것을 만들었습니다.

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

스 니펫 확장