Bienvenid@s, hoy os traigo un ejemplo de como realizar una subida múltiple de imágenes, los archivos a subir son validados tanto del lado del cliente con Javascript como del lado del servidor con PHP sólo permitiendo imágenes y con unas determinadas características, se mostrará una vista previa de las imágenes a subir, la petición se hará a través de la tecnología AJAX.
El ejemplo ha sido extraido del siguiente vídeo:
El ejemplo se compone de dos archivos "multiple.php" que es donde se encuentra el formulario con el campo file múltiple y el código Javascript/jQuery para validar los archivos a subir y realizar la petición ajax al archivo "multiple-ajax.php" que es desde donde también validaremos los archivos enviados y los guardaremos en la carpeta "imagenes" en caso de ser imágenes válidas.
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;
}
No hay comentarios:
Publicar un comentario