Subir múltiples imágenes sin refrescar la página mediante jQuery, Ajax y PHP

Subir imágenes o archivos es una de las funcionalidades más utilizadas en toda aplicación web que se precie. Por norma general, la subida de ficheros es muy útil si lo que quieres es que los usuarios te envíen ficheros de sus propios equipos. Puedes llevarlo a cabo mediante PHP y un campo input en HTML. En la mayoría de casos, las aplicaciones simplemente te permiten subir solo un archivo a la vez. Pero si lo que quieres es que el usuario suba múltiples ficheros a la vez, tendrás que contar con una buena interfaz de usuario.

Mediante PHP, como he dicho antes, puedes subir varias imágenes a la vez. Pero si quieres sorprender a tus usuarios, lo suyo es contar con una interfaz que sea capaz de subir varias imágenes con un solo clic sin refrescar la página. Las imágenes se pueden subir sin recargar la página con jQuery y Ajax. En este tutorial, te mostraremos a subir múltiples imágenes sin refrescar la página mediante jQuery, Ajax y PHP.

Formulario para subir multiples ficheros (index.html)

Este fichero gestiona la selección de múltiples imágenes.

Código HTML

Crea un fichero HTML con input file para ficheros que permita al usuario subir multiples ficheros.

  • El tag <form> debe contener los atributos method=”post” y enctype=”multipart/form-data”
  • El tag <input> debe contener los atributos type=”file” y multiple
<div class="upload-div">
    <!-- File upload form -->
    <form id="uploadForm" enctype="multipart/form-data">
        <label>Choose Images</label>
        <input type="file" name="images[]" id="fileInput" multiple >
        <input type="submit" name="submit" value="UPLOAD"/>
    </form>
	
    <!-- Display upload status -->
    <div id="uploadStatus"></div>
</div>

Define un elemento DIV en la página web ya que lo aprovecharemos para mostrar las imágenes que el usuario vaya subiendo en formato galería.

<!-- Gallery view of uploaded images --> 
<div class="gallery"></div>

Código Javascript

Para subir ficheros, utilizaremos jQuery y Ajax. Así que lo primero que debemos hacer es incluir la librería jQuery.

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

El siguiente código jQuery envía la información de las imágenes seleccionadas a nuestro script del lado del servidor vía Ajax.

  • Al hacer submit en el formulario, la información de los ficheros seleccionados se envían al fichero upload.php utilizando jQuery y Ajax.
  • Utilizaremos el objeto FormData para recuperar la información de las imágenes.
  • Basándonos en la respuesta, mostraremos el estado de la subida al usuario y las imágenes se insertarán en el elemento especificado.
  • Se validará y restringirá el MIME Type de los ficheros para que solo se puedan subir imágenes.
<script>
$(document).ready(function(){
    // File upload via Ajax
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('#uploadStatus').html('<img src="images/uploading.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<span style="color:#EA4335;">Images upload failed, please try again.<span>');
            },
            success: function(data){
                $('#uploadForm')[0].reset();
                $('#uploadStatus').html('<span style="color:#28A74B;">Images uploaded successfully.<span>');
                $('.gallery').html(data);
            }
        });
    });
    
    // File type validation
    $("#fileInput").change(function(){
        var fileLength = this.files.length;
        var match= ["image/jpeg","image/png","image/jpg","image/gif"];
        var i;
        for(i = 0; i < fileLength; i++){ 
            var file = this.files[i];
            var imagefile = file.type;
            if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]) || (imagefile==match[3]))){
                alert('Please select a valid image file (JPEG/JPG/PNG/GIF).');
                $("#fileInput").val('');
                return false;
            }
        }
    });
});
</script>

Subir múltiples imágenes utilizando PHP (upload.php)

El fichero upload.php es llamado por Ajax para gestionar el proceso de la subida de las imágenes utilizando PHP.

Recupera la información de las imágenes enviadas utilizando el método $_FILES utilizando PHP Sube las imágenes al servidor utilizando la función move_uploaded_file() en PHP Genera una vista HTML con las imágenes subidas

<?php
if(!empty($_FILES['images'])){
    // File upload configuration
    $targetDir = "uploads/";
    $allowTypes = array('jpg','png','jpeg','gif');
    
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        $image_name = $_FILES['images']['name'][$key];
        $tmp_name   = $_FILES['images']['tmp_name'][$key];
        $size       = $_FILES['images']['size'][$key];
        $type       = $_FILES['images']['type'][$key];
        $error      = $_FILES['images']['error'][$key];
        
        // File upload path
        $fileName = basename($_FILES['images']['name'][$key]);
        $targetFilePath = $targetDir . $fileName;
        
        // Check whether file type is valid
        $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
        if(in_array($fileType, $allowTypes)){    
            // Store images on the server
            if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){
                $images_arr[] = $targetFilePath;
            }
        }
    }
    
    // Generate gallery view of the images
    if(!empty($images_arr)){ ?>
        <ul>
        <?php foreach($images_arr as $image_src){ ?>
            <li><img src="<?php echo $image_src; ?>" alt=""></li>
        <?php } ?>
        </ul>
    <?php }
}
?>

Puedes mostrar una preview de las imágenes seleccionadas sin subirlas al servidor utilizando PHP.

$images_arr = array();
foreach($_FILES['images']['name'] as $key=>$val){
    $image_name = $_FILES['images']['name'][$key];
    $tmp_name   = $_FILES['images']['tmp_name'][$key];
    $size       = $_FILES['images']['size'][$key];
    $type       = $_FILES['images']['type'][$key];
    $error      = $_FILES['images']['error'][$key];
    
    // File upload path
    $fileName = basename($_FILES['images']['name'][$key]);
    $targetFilePath = $targetDir . $fileName;
    
    // Check whether file type is valid
    $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
    if(in_array($fileType, $allowTypes)){    
        // Display images without storing in the server
        $img_info = getimagesize($_FILES['images']['tmp_name'][$key]);
        $images_arr[] = "data:".$img_info["mime"].";base64,".base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
    }
}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP