Bienvenid@s, hoy veremos un ejemplo práctico de como subir múliples imágenes con jQuery+AJAX+PHP, en el ejemplo intervienen los siguientes archivos:
multiple.php : En este archivo tendremos el formulario con el input file multiple. También podremos ver una vista previa de las imágenes antes de enviarlas mediante AJAX, para ello detectaremos el evento "change" del input file, validaremos del lado del cliente con jQuery y Javascript, si el archivo tiene un tamaño superior a 1MB, el archivo será rechazado, si el archivo no es de los permitidos: jpeg|jpg|gif|png también será rechazado y si pasa estos dos filtros la imagen será mostrada en la vista previa. Una vez que se han seleccionado las imágenes que se quieren subir, podemos hacer click en el botón del formulario para realizar la petición AJAX mediante el método $.ajax de jQuery.
multiple-ajax : En este archivo capturamos el parámetro file que contendrá un array con todos los archivos seleccionados por el usuario, recorreremos uno a uno los archivos comprobando si son válidos, si lo son los guardaremos en la carpeta "imagenes".
multiple.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:
Hola. Excelente scripts para subir fotos pero como puedo cancelar una foto de la lista previa para no subir a la base de datos
Publicar un comentario