Subida de imágenes inline utilizando jQuery, PHP y MySQL

El hecho de contar con la característica de poder subir imágenes de forma inline hace que tu aplicación web sea más amigable. Con esta peculiar subida, el usuario podrá seleccionar y subir imágenes sin tener que refrescar la página. Además, una vez que la imagen se ha subido, se mostrará una preview de la misma. Todo esto sin recargar y utilizando, unicamente como control la propia imagen que tengamos subida, sin necesidad de campos file, botones y demás elementos. Solo la imagen. Podrás implementar esta función simplemente con jQuery, sin tener que utilizar Ajax o cualquier otro plugin.

La subida de imágenes inline es muy útil en, por ejemplo, un panel de control en el que el usuario tenga que actualizar su foto de perfil. En este tutorial, te mostraremos a implementar una subida de imágenes inline precisamente con ese ejemplo, el de actualizar una simple foto de perfil.

Para este ejemplo necesitaremos una base de datos MySQL, de donde extraeremos la información del usuario. El propio usuario será el encargado de cambiar su imagen de perfil sin tener que refrescar la página. Por supuesto, una vez hecha esta acción, la información se actualizará automáticamente en la base de datos.

Creación de la base de datos

Esta sería la estructura de la tabla users que utilizaremos en este ejemplo.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `picture` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Configuración de la base de datos (dbconfig.php)

El fichero dbconfig.php lo utilizaremos para conectar con la BD mediante PHP. Tendrás que especificar el host de la base de datos ($dbHost), el nombre de usuario ($dbUsername), la contraseña ($dbPassword) y el nombre de la base de datos ($dbName).

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

//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 imágenes inline (index.php)

Inicialmente, se mostrará el nombre de usuario y la imagen. Una vez que el usuario mueva el cursor encima de la imagen de perfil, se mostrará el icono de edición. Clicando en este icono de edición, el usuario podrá seleccionar la imagen que quiere actualizar como foto de perfil. La imagen seleccionada se subirá al servidor, se actualizará la información en la base de datos mediante el fichero upload.php y se mostrará en el mismo sitio que la imagen anterior. Es decir, se reemplazará la antigua imagen, por la nueva que se acaba de subir.

Código HTML y PHP

Utilizaremos el siguiente código HTML para mostrar el nombre de usuario y la imagen con la opción de edición.

<?php
//Include database configuration file
include_once 'dbConfig.php';

//Get current user ID from session
$userId = $_SESSION['user_id'];

//Get user data from database
$result = $db->query("SELECT * FROM users WHERE id = $userId");
$row = $result->fetch_assoc();

//User profile picture
$userPicture = !empty($row['picture'])?$row['picture']:'no-image.png';
$userPictureURL = 'uploads/images/'.$userPicture;
?>
<div class="container">
    <div class="user-box">
        <div class="img-relative">
            <!-- Loading image -->
            <div class="overlay uploadProcess" style="display: none;">
                <div class="overlay-content"><img src="images/loading.gif"/></div>
            </div>
            <!-- Hidden upload form -->
            <form method="post" action="upload.php" enctype="multipart/form-data" id="picUploadForm" target="uploadTarget">
                <input type="file" name="picture" id="fileInput"  style="display:none"/>
            </form>
            <iframe id="uploadTarget" name="uploadTarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
            <!-- Image update link -->
            <a class="editLink" href="javascript:void(0);"><img src="images/edit.png"/></a>
            <!-- Profile image -->
            <img src="<?php echo $userPictureURL; ?>" id="imagePreview">
        </div>
        <div class="name">
            <h4><?php echo $row['name']; ?></h3>
        </div>
    </div>
</div>

Código Javascript

Antes que nada, incluye la librería jQuery

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

El siguiente código jQuery gestiona toda la subida de la imagen y la funcionalidad de edición.

<script type="text/javascript">
$(document).ready(function () {
    //If image edit link is clicked
    $(".editLink").on('click', function(e){
        e.preventDefault();
        $("#fileInput:hidden").trigger('click');
    });

    //On select file to upload
    $("#fileInput").on('change', function(){
        var image = $('#fileInput').val();
        var img_ex = /(.jpg|.jpeg|.png|.gif)$/i;
        
        //validate file type
        if(!img_ex.exec(image)){
            alert('Please upload only .jpg/.jpeg/.png/.gif file.');
            $('#fileInput').val('');
            return false;
        }else{
            $('.uploadProcess').show();
            $('#uploadForm').hide();
            $( "#picUploadForm" ).submit();
        }
    });
});

//After completion of image upload process
function completeUpload(success, fileName) {
    if(success == 1){
        $('#imagePreview').attr("src", "");
        $('#imagePreview').attr("src", fileName);
        $('#fileInput').attr("value", fileName);
        $('.uploadProcess').hide();
    }else{
        $('.uploadProcess').hide();
        alert('There was an error during file upload!');
    }
    return true;
}
</script>

Subida y modificación de la imagen (upload.php)

En el fichero upload.php, la imagen que se ha enviado desde index.php se subirá al servidor utilizando PHP. Además, sustituiremos la antigua imagen por la nueva en la base de datos también. Una vez que la subida se ha completado, llamaremos a la función completeUpload() con el estado de la operación.

<?php
if(!empty($_FILES['picture']['name'])){
    //Include database configuration file
    include_once 'dbConfig.php';
    
    //File uplaod configuration
    $result = 0;
    $uploadDir = "uploads/images/";
    $fileName = time().'_'.basename($_FILES['picture']['name']);
    $targetPath = $uploadDir. $fileName;
    
    //Upload file to server
    if(@move_uploaded_file($_FILES['picture']['tmp_name'], $targetPath)){
        //Get current user ID from session
        $userId = 1;
        
        //Update picture name in the database
        $update = $db->query("UPDATE users SET picture = '".$fileName."' WHERE id = $userId");
        
        //Update status
        if($update){
            $result = 1;
        }
    }
    
    //Load JavaScript function to show the upload status
    echo '<script type="text/javascript">window.top.window.completeUpload(' . $result . ','' . $targetPath . '');</script>  ';
}

style.css

Utilizaremos este CSS para dar estilo a nuestro ejemplo.

.container{width: 100%;}
.user-box {
    width: 200px;
    border-radius: 0 0 3px 3px;
    padding: 10px;
    position: relative;
}
.user-box .name {
    word-break: break-all;
    padding: 10px 10px 10px 10px;
    background: #EEEEEE;
    text-align: center;
    font-size: 20px;
}
.user-box form{display: inline;}
.user-box .name h4{margin: 0;}
.user-box img#imagePreview{width: 100%;}

.editLink {
    position:absolute;
    top:28px;
    right:10px;
    opacity:0;
    transition: all 0.3s ease-in-out 0s;
    -mox-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    background:rgba(255,255,255,0.2);
}
.img-relative:hover .editLink{opacity:1;}
.overlay{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(255,255,255,0.7);
}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}
.uploadProcess img{
    max-width: 207px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    display: inline;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

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