Bienvenid@s, hoy veremos un ejemplo de como subir imágenes con PHP. Para poder subir archivos al servidor es necesario crear un formulario con el atributo enctype='multipart/form-data' y un campo del tipo file para adjuntar el archivo.
En este caso sólo permitiremos la subida de imágenes, concretamente, con formato png, jpg, jpeg y gif y no podrán superar el tamaño de 1 MB.
La ruta donde se guardarán las imágenes es en una carpeta llamada "files", así que para que el ejemplo funcione correctamente, en la misma carpeta donde tienes alojado el script de ejemplo tendrás que crear una carpeta con el nombre "files", o modificar la ruta en el script hacia la carpeta que quieras.
Script de ejemplo:
<?php
$resultado = null;
if (isset($_POST['formulario']))
{
$name = $_FILES['imagen']['name'];
$tmp_name = $_FILES['imagen']['tmp_name'];
$error = $_FILES['imagen']['error'];
$size = $_FILES['imagen']['size'];
$type = $_FILES['imagen']['type'];
$max_size = 1024 * 1024 * 1; //1mb
if ($error)
{
$resultado = 'Ha ocurrido un error';
}
else if($size > $max_size)
{
$resultado = 'El tamaño de la imagen supera el máximo permitido';
}
else if ($type != 'image/png' && $type != 'image/jpg' && $type != 'image/jpeg' && $type != 'image/gif')
{
$resultado = 'Error sólo están permitidos los formatos png|jpg|gif';
}
else
{
$ruta = 'files/'.$name;
move_uploaded_file($tmp_name, $ruta);
$resultado = "La imagen '$name' ha sido guardada con éxito";
}
}
?>
<strong><?php echo $resultado; ?></strong>
<form method='post' enctype='multipart/form-data' action='<?php echo $_SERVER['PHP_SELF']; ?>'>
Subir imagen: <input type='file' name='imagen'>
<input type='hidden' name='formulario'>
<input type='submit' value='Subir'>
</form>
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;
}
