En esta parte del tutorial veremos como validar el campo input file a través de la propiedad files que regresa un array con los archivos de subida e iremos validando a través de las propiedades length, type y size.
files -> Almacena en un array los archivos a subir.
length -> Obtiene el total de archivos a subir.
type -> Obtiene el tipo de archivo a subir.
size -> Obtiene el tamaño del archivo a subir.
name -> Obtiene el nombre del archivo a subir.
Código de ejemplo de capítulo ...
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()
{
var btn = document.getElementById("btn");
btn.onclick = function()
{
var imagen = document.getElementById("imagen").files;
if(imagen.length == 0)
{
alert("La subida de imagenes es requerida");
return;
}
else
{
for(x = 0; x < imagen.length; x++)
{
if (imagen[x].type != "image/png" && imagen[x].type != "image/jpg" && imagen[x].type != "image/jpeg" && imagen[x].type != "image/gif")
{
alert("El archivo " + imagen[x].name + " no es una imagen");
return;
}
if (imagen[x].size > 1024*1024*1)
{
alert("La imagen " + imagen[x].name + " supera el tamaño máximo permitido 1MB");
return;
}
}
}
document.formulario.submit();
}
}
</script>
</head>
<body>
<form method="post" name="formulario" enctype="multipart/form-data">
Subir imágenes: <input type="file" multiple name="imagen" id="imagen">
<button type="button" id="btn">Subir</button>
</form>
</body>
</html>
1 comentario:
Esto no funciona en IE
Publicar un comentario