Jak sprawdzić rozmiar wejścia pliku za pomocą jQuery?

Jeśli chcesz użyć jQuery ' s validate możesz utworzyć tę metodę:

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

Użyłbyś go:

$('#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" }
});

Ten kod:

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

Zwraca Rozmiar Pliku dla wejścia formularza.

Na FF 3.6 i później ten kod powinien być:

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

Ja też zamieszczam swoje rozwiązanie, używane do ASP.NET Kontrola. Może komuś się przyda.

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

Tego typu sprawdzanie można wykonać za pomocą Flasha lub Silverlight, ale nie Javascript. Piaskownica javascript nie zezwala na dostęp do systemu plików. Sprawdzenie rozmiaru musiałoby być wykonane po stronie serwera po jego przesłaniu.

Jeśli chcesz przejść trasę Silverlight / Flash, możesz sprawdzić, czy jeśli nie są one zainstalowane, to domyślnie są to zwykłe procedury przesyłania plików, które używają normalnych kontrolek. W ten sposób, jeśli mają zainstalowany Silverlight / Flash, ich doświadczenie będzie trochę bardziej bogaty.

Plese spróbuj tego:

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

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

Uważam, że jest to najłatwiejsze, jeśli nie planujesz przesłać formularza za pomocą standardowych metod ajax / html5, ale oczywiście działa z czymkolwiek.

Uwagi:

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

To kiedyś działało, ale już nie w chrome, właśnie przetestowałem powyższy kod i działało zarówno w FF jak i chrome (Ostatnie). Druga ["0"] jest teraz firstChild.