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

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]예외가 발생하므로 파일 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;

아래를 사용하여 파일 크기를 확인하고 파일 크기가 더 큰지 여부를 확인합니다.

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

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;
        }
    })
});

<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>

표준 agax / html5 방법을 통해 양식을 제출할 계획이 없다면 이것이 가장 쉽다는 것을 알게 되었지만, 물론 어떤 방법으로도 작동합니다.

주의:

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

예전에는 이것이 작동했지만, 더 이상 크롬으로 작동하지 않습니다, 방금 위의 코드를 테스트했는데 ff와 크롬(마지막) 모두 작동했습니다.두 번째 ["0"]은 이제 첫 번째 자식입니다.

시도해 보십시오.

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;
}

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

Silverlight/Flash 경로를 사용하려는 경우 일반 컨트롤을 사용하는 일반 파일 업로드 핸들러로 기본적으로 설치되지 않았는지 확인할 수 있습니다.이렇게 하면 Silverlight/Flash가 설치되어 있으면 경험이 좀 더 풍부해집니다.

HTML 코드:

<input type="file" id="upload" class="filestyle" onchange="SizeCheck();"/>

JavaScript 기능:

function SizeCheck() {
            var fileInput = document.getElementById('upload').files;
            var fsize = fileInput[0].size;
            var file = Math.round((fsize / 1024));
            if (file >= 10240) {     //10MB
               //Add Alert Here If 
                $('#upload_error').html("* File Size < 10MB");
            }
            else {
                $('#invoice_error').html("");
            }
        }

<script>
  if (Math.round((document.getElementById('Your_input_id').files[0].size / 1024)>= 1024) { //2MB
    $("#your_error_id").html("File Size < 1MB");
    $("#your_error_id").css("color", "#dd4b39");
    $("#Your_input_id").val('');
    return false;
  }
</script>

언급URL : https://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery