Bienvenid@s, hoy veremos un ejemplo de como subir imágenes al servidor mediante AJAX, esto puede ser útil para permitir por ejemplo a los usuarios que han iniciado sesión cambiar la foto de perfil. Para el ejemplo crea una carpeta en htdocs, en su interior crea una carpeta llamada imágenes que es donde iremos guardando las imágenes que vayamos subiendo, también vamos a crear dos archivos, uno llamado index.php que es donde se encontrará el formulario con el input file y el otro se llamará imagen-ajax.php que es donde realizaremos la petición AJAX.
index.php:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("input[name='file']").on("change", function(){
var formData = new FormData($("#formulario")[0]);
var ruta = "imagen-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" name="file">
</form>
<div id="respuesta"></div>
</body>
</html>
imagen-ajax.php
<?php
if (isset($_FILES["file"]))
{
$file = $_FILES["file"];
$nombre = $file["name"];
$tipo = $file["type"];
$ruta_provisional = $file["tmp_name"];
$size = $file["size"];
$dimensiones = getimagesize($ruta_provisional);
$width = $dimensiones[0];
$height = $dimensiones[1];
$carpeta = "imagenes/";
if ($tipo != 'image/jpg' && $tipo != 'image/jpeg' && $tipo != 'image/png' && $tipo != 'image/gif')
{
echo "Error, el archivo no es una imagen";
}
else if ($size > 1024*1024)
{
echo "Error, el tamaño máximo permitido es un 1MB";
}
else if ($width > 500 || $height > 500)
{
echo "Error la anchura y la altura maxima permitida es 500px";
}
else if($width < 60 || $height < 60)
{
echo "Error la anchura y la altura mínima permitida es 60px";
}
else
{
$src = $carpeta.$nombre;
move_uploaded_file($ruta_provisional, $src);
echo "<img src='$src'>";
}
}
No hay comentarios:
Publicar un comentario