Bienvenid@s, hoy veremos un ejemplo de como subir varias imágenes con AJAX y como mostrar una vista previa de las imágenes antes de subirlas. Para mostrar la vista previa de las imágenes utilizaremos jQuery y Javascript, para ello detectaremos el evento "change" del input file, también validaremos del lado del cliente el tamaño máximo permitido que será 1MB y el tipo de archivo del que se trata, sólo permitidos jpg|jpeg|png|gif.
Una vez seleccionadas las imágenes que queremos subir, es momento de realizar la petición ajax, que la haremos al hacer click en botón del formulario a un archivo llamado "multiple-ajax.php" desde el cual recorreremos una a una las imágenes subidas, con php también validaremos los archivos a subir, verificando el tamaño máximo permitido 1MB, el tipo de archivo permitido: jpg|jpeg|gif|png y validaremos las dimensiones de la imagen, es decir, para que la imagen sea aceptada deberá no ser superior en su anchura o altura a 500px ni inferior a 60px.
Las imágenes serán guardadas en una carpeta llamada "imagenes", los archivos que intervienen son "index.php" desde donde realizaremos la petición AJAX a "multiple-ajax.php".
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#file").on("change", function(){
/* Limpiar vista previa */
$("#vista-previa").html('');
var archivos = document.getElementById('file').files;
var navegador = window.URL || window.webkitURL;
/* Recorrer los archivos */
for(x=0; x<archivos.length; x++)
{
/* Validar tamaño y tipo de archivo */
var size = archivos[x].size;
var type = archivos[x].type;
var name = archivos[x].name;
if (size > 1024*1024)
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" supera el máximo permitido 1MB</p>");
}
else if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png' && type != 'image/gif')
{
$("#vista-previa").append("<p style='color: red'>El archivo "+name+" no es del tipo de imagen permitida.</p>");
}
else
{
var objeto_url = navegador.createObjectURL(archivos[x]);
$("#vista-previa").append("<img src="+objeto_url+" width='250' height='250'>");
}
}
});
$("#btn").on("click", function(){
var formData = new FormData($("#formulario")[0]);
var ruta = "multiple-ajax.php";
$.ajax({
url: ruta,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(datos)
{
$("#respuesta").html(datos);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="formulario" enctype="multipart/form-data">
Subir imagen: <input type="file" id="file" name="file[]" multiple>
<button type="button" id="btn">Subir imágenes</button>
</form>
<div id="vista-previa"></div>
<div id="respuesta"></div>
</body>
</html>
multiple-ajax.php
<?php
if (isset($_FILES["file"]))
{
$reporte = null;
for($x=0; $x<count($_FILES["file"]["name"]); $x++)
{
$file = $_FILES["file"];
$nombre = $file["name"][$x];
$tipo = $file["type"][$x];
$ruta_provisional = $file["tmp_name"][$x];
$size = $file["size"][$x];
$dimensiones = getimagesize($ruta_provisional);
$width = $dimensiones[0];
$height = $dimensiones[1];
$carpeta = "imagenes/";
if ($tipo != 'image/jpeg' && $tipo != 'image/jpg' && $tipo != 'image/png' && $tipo != 'image/gif')
{
$reporte .= "<p style='color: red'>Error $nombre, el archivo no es una imagen.</p>";
}
else if($size > 1024*1024)
{
$reporte .= "<p style='color: red'>Error $nombre, el tamaño máximo permitido es 1mb</p>";
}
else if($width > 500 || $height > 500)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura máxima permitida es de 500px</p>";
}
else if($width < 60 || $height < 60)
{
$reporte .= "<p style='color: red'>Error $nombre, la anchura y la altura mínima permitida es de 60px</p>";
}
else
{
$src = $carpeta.$nombre;
move_uploaded_file($ruta_provisional, $src);
echo "<p style='color: blue'>La imagen $nombre ha sido subida con éxito</p>";
}
}
echo $reporte;
}
1 comentario:
Muchas gracias, tu tutorial me sirvio bastante, solo tengo una pregunta.
Me parece que al momento de querer subir muchas imagenes puede volverse pesado y fallar, es posible hacer una adaptacion para que se suban las fotos de una en una? como podria enviarlas de una en una?
Publicar un comentario