Come controllare la dimensione di input del file con jQuery?

Ho un modulo con funzionalità di caricamento dei file e vorrei essere in grado di avere un bel report degli errori sul lato client se il file che l'utente sta tentando di caricare è troppo grande, c'è un modo per verificare la dimensione del file con jQuery, sia puramente sul client o in qualche modo postare il file sul server per verificare?

In realtà non hai accesso al filesystem (ad esempio lettura e scrittura di file locali), tuttavia, a causa della specifica API del file HTML5, ci sono alcune proprietà dei file a cui hai accesso e la dimensione del file è una di queste.

Per il codice HTML di seguito

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

prova quanto segue:

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

});

Dato che fa parte della specifica HTML5, funzionerà solo con i browser moderni (v10 richiesto per IE) e ho aggiunto qui maggiori dettagli e collegamenti su altre informazioni sui file che dovresti conoscere: http://felipe.sabino.me/javascript / 2012/01/30 / Javascipt controllo-the-file-size /

Supporto per vecchi browser

Tieni presente che i vecchi browser restituiranno un nullvalore per la this.fileschiamata precedente , quindi l'accesso this.files[0]genererà un'eccezione e dovresti verificare il supporto dell'API File prima di usarlo

Se vuoi usare jQuery validatepuoi creare questo metodo:

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

Lo useresti:

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

Questo codice:

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

Restituisce la dimensione del file per un input del modulo.

Su FF 3.6 e versioni successive questo codice dovrebbe essere:

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

Sto pubblicando anche la mia soluzione, utilizzata per un FileUploadcontrollo ASP.NET . Forse qualcuno lo troverà utile.

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

Usa sotto per controllare le dimensioni del file e cancellare se è maggiore,

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

Puoi eseguire questo tipo di controllo con Flash o Silverlight ma non Javascript. La sandbox javascript non consente l'accesso al file system. Il controllo delle dimensioni dovrebbe essere eseguito sul lato server dopo che è stato caricato.

Se si desidera seguire il percorso Silverlight / Flash, è possibile verificare che se non sono installati per impostazione predefinita su un normale gestore di caricamento di file che utilizza i normali controlli. In questo modo, se Silverlight / Flash è installato, la loro esperienza sarà un po 'più ricca.

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

Ho scoperto che questo è il più semplice se non prevedi di inviare il modulo tramite i metodi standard ajax / html5, ma ovviamente funziona con qualsiasi cosa.

APPUNTI:

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

Questo funzionava, ma non funziona più in Chrome, ho appena testato il codice sopra e ha funzionato sia in ff che in Chrome (l'ultimo). Il secondo ["0"] ora è firstChild.

Per favore prova questo:

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