Validar tamaño archivo antes de enviar formulario

isabelramirezmontoya · #1 (**permalink**) 19/03/2013, 09:04

Chicos buenos días, me pueden dar una mano

En un formulario con campo archivo se puede validar el tamaño de un archivo antes de enviar el formulario. Actualmente lo valido en php del lado del servidor pero no es lo mas eficiente, lo ideal seria validarlo al seleccionarlo en el formulario.

Gracias por su tiempo

Gracias

Reedyseth · #2 (**permalink**) 19/03/2013, 11:49

Actualmente con html normal no te permite tener acceso al path de tu archivo, pero con html5 ya tienes un tipo "file" en tu input, entonces con javascript puedes obtener el tamaño del archivo con algo asi:

Código Javascript:

Ver originalvar input = document.getElementById('archivo');
var file = input.files[0];
alert(file.size);

Código HTML:

Ver original<input type='file' id='archivo'>

Pero no todos los exploradores aun suportan este tipo de html5, pero el hacer la calidacion en el servidor del tamano no es mucho trabajo, puedes validar el tamano antes de hacer cualquier otra accion, lo que es tardado es la subida,

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