Como subir una imagen con jQuery, Ajax y PHP

En este artículo vamos a explicar como permitir al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la página y sin utilizar plugins de terceros.

En el ejemplo en funcionamiento tenemos un formulario que contiene un imagen, el campo para seleccionar un archivo y un botón para realizar la subida. El usuario puede subir una imagen en formato png, jpg o gif. La imagen es cargada al servidor y se pre visualiza en pantalla sin recargar la página después de pulsar el botón “Subir”.

¿Cómo lo conseguimos?

Hace tiempo andaba buscando un código como este que simplifique mucho el proceso, usando menos recursos y con un efecto similar. Resulta que es muy sencillo. Lo vamos a explicar utilizando el ejemplo que hemos creado para este tutorial.

Aspecto visual o diseño

La interfaz o aspecto visual es el siguiente:

Conseguido sin mucho esfuerzo gracias a la tecnología Bootstrap 4.

Código JavaScript necesario

En la cabecera o dentro de la etiqueta <head> de tu página tienes que agregar la librería jQuery y la llamada al evento:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
    $(".upload").on('click', function() {
        var formData = new FormData();
        var files = $('#image')[0].files[0];
        formData.append('file',files);
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response != 0) {
                    $(".card-img-top").attr("src", response);
                } else {
                    alert('Formato de imagen incorrecto.');
                }
            }
        });
        return false;
    });
});
</script>

El código anterior también puede estar incrustado justo antes de la etiqueta de cierre </body>.

Tan solo estamos esperando a que se haga click en el botón que contiene la clase “upload” para obtener el archivo seleccionado desde el ordenador para pasarlo al archivo “upload.php” para que pueda ser procesado en el servidor. Una vez se ha proceso la imagen en el servidor, si la respuesta es diferente de 0, el atributo src de nuestra imagen se cambiará por la respuesta. En caso contrario mostrar un alerta de error.

La clave del asunto está en la utilización de la clase FormData.

Los objetos FormData permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en “multipart/form-data”.

En el ejemplo estamos creando un objeto de tipo FormData para agregarle la imagen. El objeto FormData se lo pasamos al archivo PHP mediante la técnica Ajax. De esta forma, en el archivo PHP tendremos la información necesaria para procesar la imagen.

Este código también puede ser útil para subir otro tipo de archivos, tan solo realizando algunos ajustes.

Código HTML que debes añadir dentro del body de tu página

En el cuerpo o dentro de la etiqueta <body> agregamos el formulario que permite subir archivos:

<form method="post" action="#" enctype="multipart/form-data">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="images/default-avatar.png">
        <div class="card-body">
            <h5 class="card-title">Sube una foto</h5>
            <p class="card-text">Sube una imagen...</p>
            <div class="form-group">
                <label for="image">Nueva imagen</label>
                <input type="file" class="form-control-file" name="image" id="image">
            </div>
            <input type="button" class="btn btn-primary upload" value="Subir">
        </div>
    </div>
</form>

Se trata de un formulario simple que utiliza el atributo enctype=”multipart/form-data” para permitir la subida de archivos y se apoya de la tecnología Bootstrap para el diseño. Tan solo tenemos una imagen por defecto, el campo para seleccionar una imagen desde el ordenador y un botón que permite realizar la acción de subida al servidor.

Código PHP que se ejecuta en el servidor

El arhivo “upload.php” que usamos para procesar la imagen contiene lo siguiente:

<?php
if (($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/png")
    || ($_FILES["file"]["type"] == "image/gif")) {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], "images/".$_FILES['file']['name'])) {
        //more code here...
        echo "images/".$_FILES['file']['name'];
    } else {
        echo 0;
    }
} else {
    echo 0;
}

Simplemente comprobamos que el archivo que se está intentando subir sea del tipo adecuado. En este caso, solo queremos que se puedan subir imágenes .png, .jpg o .gif y, seguidamente, usamos la función move_uploaded_file() de PHP para depositar el archivo seleccionado en el lugar que deseamos. Lo guardamos con el mismo nombre de subida.

Después de esta acción se podrían hacer muchos más procesos, como por ejemplo registrar algo en la base de datos o enviar un email. Recuerda que todo esto se puede hacer sin recargar la página.

Como respuesta usamos la función echo de PHP para retornar un 0 en caso de error o la ruta del archivo subido para depositarlo en el src tal y como puedes ver en el success de la llamada Ajax.

Conclusiones

El efecto que conseguimos con este código de ejemplo se puede conseguir con infinidad de plugins de terceros que andan rondando por la Web pero, pensamos que este código puede resultar muy útil en casos extremos en los que sea necesario utilizar los menos recursos posibles para hacerlo funcionar o en casos que se necesite algo simple para permitir al usuario subir una imagen. El caso es que los plugins de terceros suelen tener infinidad de opciones que finalmente no se utilizan, lo que los hace muy complejos y grandes en tamaño para tenerlos depositados en el servidor.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre