Subir Imágenes o Archivos al servidor con AJAX y PHP

 in Web Development by

Al subir imágenes y/o archivos al servidor usando AJAX nos ayudara a evitar la clásica recarga cuando se suben archivos.

En este articulo les mostrare como subir imágenes al servidor usando AJAX, PHP, MySQL y también la útil librería class.upload.php

Para 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.htm

Có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

Leave a comment