Foros del Web - Ver Mensaje Individual - Validar tamaño archivo antes de enviar formulario

emprear · #3 (**permalink**) 19/03/2013, 11:51

Con la Api File de HTML5

Ejemplos

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Tamaño archivo</title>
</head>
<body>
<form action="#">
<input type="file" id="archivos" name="archivos[]" multiple />
<output id="lista"></output>
</form>
<script>
  function archivoSeleccionado(evt) {
  if(window.File && window.FileReader && window.FileList && window.Blob){
    var archivos = evt.target.files; 
    var salida = [];
    for (var i = 0, f; f = archivos[i]; i++) {
      salida.push('<li>',f.size, ' bytes','</li>');
    }
    document.getElementById('lista').innerHTML = '<ul>' + salida.join('') + '</ul>';
 
}else{
// solo IE, no funciona con archivos multiples
    var Fs = new ActiveXObject("Scripting.FileSystemObject");
    var ruta = document.getElementById('archivos').value;
    var archivo = Fs.getFile(ruta);
    var size = archivo.size;
document.getElementById('lista').innerHTML = '<br \/>' +size + " bytes";
}
 
}
document.getElementById('archivos').addEventListener('change', archivoSeleccionado, false);
</script>
</body>
</html>

Con jQuery

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Tamaño archivo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
//<![CDATA[
    
$(document).ready(function(){
$('#subir').bind('change', function() {
    
if(window.File && window.FileReader && window.FileList && window.Blob){
alert(this.files[0].size + ' bytes');
}else{
// IE
    var Fs = new ActiveXObject("Scripting.FileSystemObject");
    var ruta = document.upload.file.value;
    var archivo = Fs.getFile(ruta);
    var size = archivo.size;
    alert(size + " bytes");
}
 
});
});
 
//]]>
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file" id="subir">
</form>
</body>
</html>

Saludos