Subir una imagen en un formulario mediante AJAX

La funcionalidad de subir ficheros a un sitio web es una de las más utilizadas en esto de Internet. Normalmente, la información de los formularios se envían a un fichero PHP. Si quieres contar con una mejor interfaz, puedes utilizar jQuery y Ajax para subir ficheros a una web son tener que refrescar la página. Ya hemos hablado aquí sobre esta función muchas veces, pero te aseguro que no de una manera tan simple como la que te vamos a mostrar aquí.

El objeto FormData compila un conjunto de pares clave/valor a enviar utilizando XMLHttpRequest. Basicamente, FormData se utiliza para enviar la información del formulario de la misma manera que lo hace el método submit(). Estos ficheros pueden ser enviados utilizando FormData e incluyendo un un input file dentro del formulario.

Este será el patrón de acciones que llevaremos a cabo en este tutorial:

• Enviar el fichero de la imagen junto a más información utilizando jQuery y Ajax
• Subir la imagen e insertar la demás información en la base de datos mediante PHP y MySQL

Crear tabla en la base de datos

Para almacenar el nombre del fichero y la demás información, necesitamos crear una tabla en nuestra base de datos. El siguiente SQL crea una tabla llamada form_data con algunos campos básicos en nuestra base de datos MySQL.

CREATE TABLE `form_data` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `file_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Configuración de nuestra base de datos (dbConfig.php)

Utilizaremos el fichero dbConfig.php para conectarnos a nuestra base de datos mediante PHP. Tendrás que especificar el host ($dbHost), el nombre de usuario ($dbUsername), la contraseña ($dbPassword) y el nombre de la base de datos ($dbName), es decir, los credenciales de tu base de datos.

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'noprog';

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if($db->connect_error){
    die("Unable to connect database: " . $db->connect_error);
}

Subida de fichero mediante Ajax

Código HTML

Antes que nada, tendremos que crear nuestro formulario HTML. El usuario tendrá que introducir su nombre, su email y seleccionar un fichero de imagen.

<p class="statusMsg"></p>
<form enctype="multipart/form-data" id="fupForm" >
    <div class="form-group">
        <label for="name">NAME</label>
        <input type="text" class="form-control" id="name" name="name" placeholder=
"Enter name" required />
    </div>
    <div class="form-group">
      <label for="email">EMAIL</label>
        <input type="email" class="form-control" id="email" name="email" placeholder=
"Enter email" required />
    </div>
    <div class="form-group">
        <label for="file">File</label>
        <input type="file" class="form-control" id="file" name="file" required />
    </div>
    <input type="submit" name="submit" class="btn btn-danger submitBtn" value="SAVE"/>
</form>

Código Javascript

Utilizaremos jQuery Ajax para enviar la información del formulario y el fichero de imagen adjunto, asi que tendremos que incluir la librería jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Mediante el objeto FormData enviaremos la información del formulario utilizando Ajax. Una vez que el formulario se haya enviado al fichero PHP mediante Ajax, iniciaremos el proceso de subida y mostraremos el estado de dicha operación al usuario. Por supuesto, antes que nada validaremos el tipo de archivo para que no nos envíen cualquier fichero.

<script>
$(document).ready(function(e){
    $("#fupForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('.submitBtn').attr("disabled","disabled");
                $('#fupForm').css("opacity",".5");
            },
            success: function(msg){
                $('.statusMsg').html('');
                if(msg == 'ok'){
                    $('#fupForm')[0].reset();
                    $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Form data submitted successfully.</span>');
                }else{
                    $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
                }
                $('#fupForm').css("opacity","");
                $(".submitBtn").removeAttr("disabled");
            }
        });
    });
    
    //file type validation
    $("#file").change(function() {
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
            alert('Please select a valid image file (JPEG/JPG/PNG).');
            $("#file").val('');
            return false;
        }
    });
});
</script>

Subiendo el fichero e insertando la información en la base de datos (submit.php)

Llamaremos a este fichero mediante el método Ajax, el cual realiza esta acciones:

• Subir la imagen al servidor (uploads/) mediante la función move_uploaded_file()
• Insertar la información del formulario en la base de datos
• Devolver el estado de la operación.

<?php
if(!empty($_POST['name']) || !empty($_POST['email']) || !empty($_FILES['file']['name'])){
    $uploadedFile = '';
    if(!empty($_FILES["file"]["type"])){
        $fileName = time().'_'.$_FILES['file']['name'];
        $valid_extensions = array("jpeg", "jpg", "png");
        $temporary = explode(".", $_FILES["file"]["name"]);
        $file_extension = end($temporary);
        if((($_FILES["hard_file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $valid_extensions)){
            $sourcePath = $_FILES['file']['tmp_name'];
            $targetPath = "uploads/".$fileName;
            if(move_uploaded_file($sourcePath,$targetPath)){
                $uploadedFile = $fileName;
            }
        }
    }
    
    $name = $_POST['name'];
    $email = $_POST['email'];
    
    //include database configuration file
    include_once 'dbConfig.php';
    
    //insert form data in the database
    $insert = $db->query("INSERT form_data (name,email,file_name) VALUES ('".$name."','".$email."','".$uploadedFile."')");
    
    echo $insert?'ok':'err';
}

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.