jQuery로 파일 입력 크기를 확인하는 방법은 무엇입니까?

파일 업로드 기능이있는 양식이 있으며 사용자가 업로드하려고하는 파일이 너무 큰 경우 클라이언트 측 오류보고를 원합니다 .jQuery를 사용하여 파일 크기를 순수하게 검사하는 방법이 있습니까? 클라이언트에서 또는 어떻게 든 파일을 서버에 다시 게시하여 확인 하시겠습니까?

실제로 파일 시스템에 액세스 할 수는 없지만 (예 : 로컬 파일 읽기 및 쓰기) HTML5 File Api 사양으로 인해 액세스 할 수있는 파일 속성이 있으며 파일 크기가 그 중 하나입니다.

아래 HTML

<input type="file" id="myFile" />

다음을 시도하십시오 :

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

HTML5 사양의 일부이므로 최신 브라우저 (IE에는 v10 필요)에서만 작동 하며 알아야 할 다른 파일 정보에 대한 자세한 내용과 링크를 여기에 추가했습니다. http://felipe.sabino.me/javascript / 2012 / 01 / 30 / javascipt-checking-the-file-size /

오래된 브라우저 지원

이전 브라우저는 null이전 this.files호출에 대한 값을 반환 하므로 액세스 this.files[0]하면 예외가 발생 하므로 사용하기 전에 File API 지원을 확인 해야 합니다.

jQuery를 사용하려면 validate다음 메소드를 작성하십시오.

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

당신은 그것을 사용할 것입니다 :

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

이 코드는 :

$("#yourFileInput")[0].files[0].size;

양식 입력의 파일 크기를 반환합니다.

FF 3.6 이상에서이 코드는 다음과 같아야합니다.

$("#yourFileInput")[0].files[0].fileSize;

ASP.NET FileUpload컨트롤에 사용되는 솔루션도 게시하고 있습니다 . 아마도 누군가가 유용하다고 생각할 것입니다.

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});

아래를 사용하여 파일 크기를 확인하고 더 큰지 확인하십시오.

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

이러한 유형의 검사는 Flash 또는 Silverlight에서는 수행 할 수 있지만 Javascript에서는 수행 할 수 없습니다. 자바 스크립트 샌드 박스는 파일 시스템에 대한 액세스를 허용하지 않습니다. 크기 확인은 업로드 된 후 서버 측에서 수행해야합니다.

Silverlight / Flash 경로로 이동하려면 기본 컨트롤을 사용하는 일반 파일 업로드 처리기가 기본값으로 설치되어 있지 않은지 확인할 수 있습니다. 이렇게하면 Silverlight / Flash가 설치되어 있으면 경험이 조금 더 풍부 해집니다.

<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

표준 ajax / html5 메소드를 통해 양식을 제출하지 않으려는 경우 이것이 가장 쉬운 것으로 나타났습니다.

노트:

var size = $('#uploadForm')["0"]["0"].files["0"].size;

이것은 작동했지만 더 이상 크롬이 아니며 위의 코드를 테스트했으며 ff와 chrome (마지막)에서 모두 작동했습니다. 두 번째 [ "0"]은 이제 firstChild입니다.

Plese는 이것을 시도하십시오 :

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}