Client Controlla la dimensione del file usando HTML5?

Question

Sto provando a cavalcare l'onda HTML5 ma sto affrontando un piccolo problema. Prima di HTML5, stavamo controllando le dimensioni del file con il flash, ma ora la tendenza è evitare l'uso del flash nelle app web. C'è un modo per controllare le dimensioni del file sul lato client usando HTML5?

Answer 1

Questo funziona. Inseriscilo in un listener di eventi per quando l'input cambia.

if (typeof FileReader !== "undefined") { 
    var size = document.getElementById('myfile').files[0].size; 
    // check file size 
} 

Answer 2

"nessuna soluzione semplice e cross-browser per raggiungere questo obiettivo": Detecting file upload size on the client side?

Answer 3

HTML5 fie api supporta la verifica della dimensione del file.

leggere questo articolo per avere maggiori informazioni sui file di api

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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


var size = document.getElementById("fileInput").files[0].size; 

simile il file API dà nome e il tipo.

Answer 4

Uploadify può caricare file con HTML5. Inoltre c'è una versione flash.

È possibile impostare i limiti per le dimensioni del file, con il parametro "fileSizeLimit".

Answer 5

La risposta accettata è in realtà corretta, ma è necessario associarla a un listener di eventi in modo che venga aggiornata ogni volta che viene modificato l'input del file.

document.getElementById('fileInput').onchange = function(){ 
    var filesize = document.getElementById('fileInput').files[0].size; 
    console.log(filesize);  
} 

Se si utilizza libreria jQuery quindi il seguente codice può venire utile

$('#fileInput').on('change',function(){ 
    if($(this).get(0).files.length > 0){ // only if a file is selected 
    var fileSize = $(this).get(0).files[0].size; 
    console.log(fileSize); 
    } 
}); 

Dato che la conversione del fileSize per visualizzare in cui mai metrica sta a voi.

Answer 6

Personalmente, opterei per questo formato: convalida

$('#inputFile').bind('change', function(e) { 
     var data = e.originalEvent.target.files[0]; 
     // and then ... 
     console.log(data.size + "is my file's size"); 
     // or something more useful ... 
     if(data.size < 500000) { 
     // what your < 500kb file will do 
     } 
    }