Al subir imágenes y/o archivos al servidor usando AJAX nos ayudara a evitar la clásica recarga cuando se suben archivos.
📌 Nota: Este artículo forma parte de nuestro Centro de Tutoriales y Recursos. Visita la lista completa para descubrir más técnicas avanzadas, integración de APIs y buenas prácticas de backend.
En este articulo les mostrare como subir imágenes al servidor usando AJAX, PHP, MySQL y también la útil librería class.upload.phpPara mas información sobre la la librería class.upload.php, les invito a revisar su pagina oficial
http://www.verot.net/php_class_upload.htmCódigo
Empecemos a codificar, lo primero que haremos sera el formulario para subir imágenes, es un formulario normal, con el enctype=”multipart/form-data”, un campo tipo “file” y un botón de submit.[code language=”html”]<form id=”upload_image” method=”post” action=”upload.php” enctype=”multipart/form-data”><div class=”form-group”>
<label for=”exampleInputFile”>Imagen</label>
<input type=”file” id=”image” name=”image” required>
</div><button type=”submit” class=”btn btn-primary”>Subir imagen</button>
</form>[/code]El siguiente codigo es el codigo AJAX para procesar el formulario y por supuesto subir la imagen o archivo definida en el form.[code language=”javascript”]
$(‘#upload_image’).on(‘submit’,(function(e) {
e.preventDefault();
var formData = new FormData(this);$.ajax({
type:’POST’,
url: $(this).attr(‘action’),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log(“success”);
console.log(data);
$(“#image”).val(“”);
},
error: function(data){
console.log(“error”);
console.log(data);
}
});
}));
[/code]Como se puede ver usamos FormData para pasar al parámetro data de la función $.ajax de jquery.
Ahora vamos con el codigo PHP.[code language=”php”]
include “class.upload.php”;$handle = new Upload($_FILES[“image”]);
if ($handle->uploaded) {
$handle->Process(“uploads/”);
if ($handle->processed) {
// usamos la funcion insert_img de la libreria db.php
// insert_img(“”,”uploads/”,$handle->file_dst_name);
} else {
echo ‘Error: ‘ . $handle->error;
}
} else {
echo ‘Error: ‘ . $handle->error;
}
unset($handle);
[/code]Usamos la librería class.upload.php para subir las imágenes, este es una pieza de codigo muy util, y como podemos notar es la misma para subir imágenes con ajax y sin ajax, por lo que este procedimiento no cambia.
Resultado
A continuación una captura de pantalla del resultado.
Descargar
Aqui les dejo un link de descarga con todos los archivos que utilice en mi ejemplo.[sociallocker]Link:
https://drive.google.com/file/d/1DaqmbBTw308ZxWn7Mqsiwn4eOHr9zzqc/view?usp=sharing[/sociallocker]
Instalación
Para instalar el ejemplo deben:
- Copiar el contenido a la carpeta htdocs del xampp o similar
- Crear en MySQL la base de datos y tablas que se encuentran en schema.sql
- Modificar el archivo db.php para la conexión a la base de datos
- Ejecutar http://localhost/upload-image-ajax
Recuerden suscribirse a mi blog y a mi canal de youtube, Saludos
Te puede interesar: FullMedik Pro – Sistema Medico y Hospitalizacion Profesional
Related
