Come verificare la dimensione di input del file con jQuery?

Question

Ho un modulo con funzionalità di caricamento dei file e vorrei poter avere qualche segnalazione di errore 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, o semplicemente sul client o in qualche modo postare il file sul server per controllare?

Answer 1

In realtà non si ha accesso al file system (ad esempio, la lettura e la scrittura di file locali), tuttavia, a causa delle specifiche Api del file HTML5, ci sono alcune proprietà del file a cui si ha accesso e la dimensione del file è una di loro.

Per l'HTML sottostante

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

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

}); 

Siccome è una parte della specifica HTML5, che funziona solo per i browser moderni (v10 richieste per IE) e Ho aggiunto here maggiori dettagli e link su altre informazioni di file che dovresti sapere: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

vecchi browser supportano

essere consapevoli del fatto che i vecchi browser restituirà un valore null per il precedente this.files chiamata, in modo accedendo this.files[0] solleverà un'eccezione e si dovrebbe check for File API support prima di utilizzarlo

Answer 2

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

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

Answer 3

Se si desidera utilizzare jQuery di validate è possibile con la creazione di 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) 
}); 

si dovrebbe utilizzare:

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

Answer 4

Questo codice:

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

Restituisce la dimensione del file per un ingresso modulo.

On 3.6 FF e poi questo codice dovrebbe essere:

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

Answer 5

Vi metto la mia soluzione troppo, utilizzato per un FileUpload controllo 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; 
     } 
    }) 
}); 

Answer 6

<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 trovato questo per essere il più facile se non si ha intenzione di presentare la forma attraverso standard di ajax/HTML5 metodi, ma ovviamente funziona con qualsiasi cosa.

NOTE:

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

Ciò consente di lavorare, ma non è così in cromo più, ho appena provato il codice di cui sopra e ha funzionato sia in FF e Chrome (lastest). Il secondo ["0"] è ora firstChild.