Bienvenid@s, hoy veremos un modo sencillo de subir una imagen utilizando el método jQuery $.ajax, el ejemplo lo haremos a través de PHP, el cual recibirá el archivo enviado y lo analizará a través de una serie de requisitos, es decir, sólo queremos subir imágenes que tengan un formato jpg|jpeg|png|gif, también queremos que el tamaño máximo permitido de la imagen sea 1MB, también queremos que la imagen no pueda sobrepasar unas dimensiones determinado, incluyendo una anchura y altura máxima, una vez que ha cumplido todos estos requisitos guardaremos la imagen en el servidor y mostraremos la misma al usuario.
En este ejemplo intervienen dos archivos; index.php el que contendrá el formulario con el input file y el archivo ajax-imagen.php que es el script php que utilizaremos para la subida de la imagen, también crearemos una carpeta llamada "imagenes" que es la ruta a donde se guardarán todas y cada una de las imágenes que suba el usuario.
También puedes ver el vídeo por si tienes alguna duda ... Subir imagen mediante AJAX jQuery
También puedes ver el vídeo por si tienes alguna duda ... Subir imagen mediante AJAX jQuery
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>
ajax-imagen.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'>";
}
}
4 comentarios:
¿Y cómo hago para subir la imagen junto con datos que sean ingresados en otros input? ¿Tendría que hacerlo por separad? Es decir, hacer una petición ajax para la imagen y otra para los otros archivos. Ayuda! Y gracias! babasonicofernando@gmail.com
puedes hacer la accion de envio con un boton que envie todos los datos del formulario
Hola, Gracia por tu aporte. disculpa como odre hacer para poner un gif que indique que se esta cargando la imagen.
Gracias.
Tengo una ventana modal donde tengo el boton para buscar y enviar la foto,pero estando loqueado y me gustaria que en vez de mandarla foto a esa carpeta la mande al servidor,al campo del usuario logueado,usando el ID del usuario.
Publicar un comentario