Previsualizar imagen usando Bootstrap: Input File

Previsualizar imagen usando Bootstrap. Podemos enviar el archivo al servidor usando el método jQuery Ajax. Y también obtenemos una vista previa del archivo de imagen antes de cargarlo en el servidor. Vamos a subir el archivo usando Ajax JQuery.

Previsualizar imagen usando Bootstrap: Pasos

• Incluir framework Bootstrap y JQuery.
• Ocultar Input File con CSS
• JavaScript para generar imagen previa
• Ajax para guardar registro MySQL
• Base de datos para almacenar registros
• Subir y almacenar imagen
• Configuración con MySQL PHP PDO

Estructura de archivos y carpetas

El contenido del sistema posee la siguiente estrucura de ficheros y dorectorios que detallamos a continuacion.

previsualizar-imagen-usando-bootstrap
      |
      ├─ ajax
           | 
           ├─ accion.php
           ├─ config.php
           └─ Database.php
      ├─ css
      ├─ img
      ├─ uploads
      |
      └─ index.php

Incluir framework Bootstrap y JQuery

En su archivo principal, incluya el framework bootstrap. Sin embargo, para este ejemplo usaremos un CDN para incluir Bootstrap y JQuery.

A continuación, necesitamos un formulario y un contenedor para una imagen de vista previa. Cree un nombre de archivo index.php y declaramos los siguientes codigos.

El siguiente fragmento es la declaracion del framework Bootstrap 4 y podemos configurar según su necesidad.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="css/style.css" type="text/css">

Formulario HTML

<div class="container">
<div class="row justify-content-md-center">
<div class="ml-2 col-sm-4">
<div id="msg"></div>
<form method="post" id="image-form" enctype="multipart/form-data" onSubmit="return false;">
<div class="form-group">
<input type="file" name="file" class="file">
<div class="input-group my-3">
<input type="text" class="form-control" disabled placeholder="Cargar imagen" id="file">
<div class="input-group-append">
<button type="button" class="browse btn btn-primary">Browse...</button>
</div>
</div>
</div>
<div class="form-group">
<img src="./img/80x80.png" id="preview" class="img-thumbnail">
</div>
<div class="form-group">
<button name="submit" class="btn btn-danger btn-block">Cargar imagen</button>
</div>
</form>
</div>
</div>
</div>

Ocultar Input File

La idea es reemplazar el botón de exploración predeterminado usando CSS. por lo tanto, cree una carpeta llamado CSS y cree el archivo style.css y pegar el siguiente código.

.file {
visibility: hidden;
position: absolute;
}

JavaScript para generar imagen previa

Para poder obtener una imagen previa necesitaremos de código JavaScript para manejar la funcionalidad predeterminada del botón de exploración y la imagen de vista previa.

Para lograr este objetivo tenemos que declarar el siguiente script en la parte inferior de la página index.php, justo antes del cierre de la etiqueta </body>.

<script>
$(document).on("click", ".browse", function() {
var file = $(this)
.parent()
.parent()
.parent()
.find(".file");
file.trigger("click");
});
$('input[type="file"]').change(function(e) {
var fileName = e.target.files[0].name;
$("#file").val(fileName);

var reader = new FileReader();
reader.onload = function(e) {
// get loaded data and render thumbnail.
document.getElementById("preview").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});

</script>

Ajax para guardar registro MySQL

Ahora nos faltaría un código para enviar una solicitud Ajax y cargar la imagen en el servidor. Por lo tanto, usaremos PHP para cargar la imagen al servidor, la función que (move_uploaded_file).

Enviar una solicitud Ajax con PHP es muy simple, veamos un ejemplo.

<script>
$(document).ready(function(e) {
$("#image-form").on("submit", function() {
$("#msg").html('<div class="alert alert-info"><i class="fa fa-spin fa-spinner"></i> Espere por favor...!</div>');
$.ajax({
type: "POST",
url: "ajax/accion.php",
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
success: function(data) {
if (data == 1 || parseInt(data) == 1) {
$("#msg").html(
'<div class="alert alert-success"><i class="fa fa-thumbs-up"></i> Datos actualizados con éxito.</div>'
);
} else {
$("#msg").html(
'<div class="alert alert-info"><i class="fa fa-exclamation-triangle"></i> La extensión no es buena, solo prueba con <strong>GIF, JPG, PNG, JPEG</strong>.</div>'
);
}
},
error: function(data) {
$("#msg").html(
'<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Hay algo mal..</div>'
);
}
});
});
});
</script>

Base de datos para almacenar registros

Si pensamos subir una imagen al servidor y almacenar el nombre de la imagen en una base de datos tenemos que crear una base de datos y su respectiva tabla.

En este ejemplo, crearemos una tabla con el nombre de las «previsualizar» y una tabla llamada «images«. Sin embargo, para no estar creando los campos uno por uno podemos ejecutar la siguiente consulta SQL.

CREATE TABLE `images` (
`id` int(11) NOT NULL,
`img_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`img_order` int(5) NOT NULL DEFAULT 0,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` enum('1','0') CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '1'
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
ALTER TABLE `images`
ADD PRIMARY KEY (`id`);
ALTER TABLE `images`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Subir y almacenar imagen

Si bien, Ajax puede invocar a un determinado archivo PHP para que realice operaciones propias de un lenguaje de programación, necesitamos script PHP para que pueda conectarse a MYSQL y subir la imagen al servidor remoto o local.
Ahora, debemos de crear un archivo con el nombre accion.php en la carpeta Ajax y agregar el siguiente código.

<?php
include_once('config.php');

$file = $_FILES['file']['name'];
$file_image = '';
if($_FILES['file']['name']!=""){
extract($_REQUEST);
$infoExt = getimagesize($_FILES['file']['tmp_name']);
if(strtolower($infoExt['mime']) == 'image/gif' || strtolower($infoExt['mime']) == 'image/jpeg' || strtolower($infoExt['mime']) == 'image/jpg' || strtolower($infoExt['mime']) == 'image/png'){
$file = preg_replace('/\\s+/', '-', time().$file);
$path = '../uploads/'.$file;
move_uploaded_file($_FILES['file']['tmp_name'],$path);
$data = array(
'img_name'=>$file,
'img_order'=>1
);
$insert = $db->insert('images',$data);
if($insert){ echo 1; } else { echo 0; }
}else{
echo 2;
}
}
?>

Configuración con MySQL PHP PDO

El siguiente script PHP realiza la conexión con la base de datos MySQL usado PDO. A continuación, veamos el ejemplo de conexión.

<?php
error_reporting(E_ALL);

define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'previsualizar');
/*** DB INCLUDES ***/
include_once 'Database.php';

/*** DB CONNECTION ***/
$dsn = "mysql:dbname=".DB_NAME.";host=".DB_HOST."";
$pdo = '';
try {$pdo = new PDO($dsn, DB_USER, DB_PASSWORD);} catch (PDOException $e) {echo "Connection failed: " . $e->getMessage();}

$db = new Database($pdo);
?>

Segunda Forma

Para lograr el mismo objetivo podemos usar esta segunda forma la mas tradicional posible, veamos el ejemplo.

Código JavaScript

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
// Asignamos el atributo src a la tag de imagen
$('#imagenmuestra').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}

// El listener va asignado al input
$("#imagen").change(function() {
readURL(this);
});

Códigos HTML5

Mostramos lo que vendría a ser la interfaz gráfica HTML y la declaración del jQuery

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<label>Imagen:</label>
<input type="file" class="form-control" name="imagen" id="imagen" maxlength="256" placeholder="Imagen">
<input type="hidden" class="form-control" name="imagenactual" id="imagenactual">
<img src="" width="150px" height="120px" id="imagenmuestra">

Conclusión de visualizar imagen

Si deseamos incorporar una imagen previa de lo que vamos a subir al servidor podemos aplicar estas dos estrategias para lograr nuestro cometido.

Además, si deseamos usar el Framework Bootstrap, aquí en este artículo hemos desarrollado ejemplos para poder visualizar la imagen previa. Además, de procesar la imagen en el servidor.

Espero que esta breve explicación les ayude en sus proyectos web.

Descargar Script