La experiencia del usuario se puede mejorar en gran medida en una función de carga de imágenes si permitimos que el usuario obtenga una vista previa de la imagen que ha seleccionado antes de cargarla al servidor haciendo clic en el botón de carga.
En este tutorial, crearemos un formulario que toma dos entradas:la imagen de perfil del usuario (imagen) y su biografía (texto). Cuando el usuario complete el formulario y haga clic en el botón de carga, usaremos nuestro script PHP para tomar los valores del formulario (la imagen y la biografía) y guardar la imagen en nuestra carpeta de proyecto llamada imágenes. Una vez que la imagen se guarde en la carpeta del proyecto, almacenaremos un registro en la base de datos que contiene el nombre de la imagen y la biografía del usuario.
Después de guardar esta información, crearemos otra página que consulte los perfiles de usuario de la base de datos y los mostrará en la página con la biografía de cada usuario en su foto de perfil.
Entonces, comencemos con la implementación.
Crea una carpeta de proyecto y llámala image-preview-upload. Dentro de esta carpeta, cree un archivo llamado form.php y una carpeta llamada images para almacenar las imágenes.
formulario.php:
<?php include_once('processForm.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload PHP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4 form-div">
<a href="profiles.php">View all profiles</a>
<form action="form.php" method="post" enctype="multipart/form-data">
<h2 class="text-center mb-3 mt-3">Update profile</h2>
<?php if (!empty($msg)): ?>
<div class="alert <?php echo $msg_class ?>" role="alert">
<?php echo $msg; ?>
</div>
<?php endif; ?>
<div class="form-group text-center" style="position: relative;" >
<span class="img-div">
<div class="text-center img-placeholder" onClick="triggerClick()">
<h4>Update image</h4>
</div>
<img src="images/avatar.jpg" onClick="triggerClick()" id="profileDisplay">
</span>
<input type="file" name="profileImage" onChange="displayImage(this)" id="profileImage" class="form-control" style="display: none;">
<label>Profile Image</label>
</div>
<div class="form-group">
<label>Bio</label>
<textarea name="bio" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" name="save_profile" class="btn btn-primary btn-block">Save User</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script src="scripts.js"></script>Antes de hablar sobre el formulario, primero vamos a crear un archivo de estilo llamado main.css para el formulario en la carpeta raíz de nuestro proyecto.
principal.css:
.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 60%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
width: 60%;
color: white;
height: 100%;
background: black;
opacity: .7;
height: 210px;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
}
.img-placeholder h4 {
margin-top: 40%;
color: white;
}
.img-div:hover .img-placeholder {
display: block;
cursor: pointer;
}
En la primera línea de nuestro archivo form.php, incluimos un archivo que contiene nuestro script PHP responsable de recibir los valores del formulario y procesarlos (es decir, guardar la imagen en la carpeta de imágenes y crear un registro correspondiente en la tabla de usuarios). en la base de datos).
Si observa el formulario, verá que estamos configurando el valor de la visualización de la propiedad CSS en ninguno; Estamos haciendo esto porque no queremos mostrar el elemento de entrada HTML predeterminado para la carga de archivos. En su lugar, crearemos un elemento diferente y le daremos el estilo que queramos y luego, cuando el usuario haga clic en nuestro elemento, usaremos JavaScript bajo el capó para activar el elemento de entrada del archivo HTML que está oculto para nosotros.
Ahora agreguemos las secuencias de comandos responsables de activar el elemento de entrada del archivo y luego también mostrar la imagen para la vista previa.
Cree un archivo llamado scripts.js en la raíz de su aplicación y agregue este código:
secuencia de comandos.js:
function triggerClick(e) {
document.querySelector('#profileImage').click();
}
function displayImage(e) {
if (e.files[0]) {
var reader = new FileReader();
reader.onload = function(e){
document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]);
}
}
Ahora, cuando el usuario haga clic en el área de la imagen redonda, la función triggerClick() activará un evento de clic en el elemento de entrada del archivo oculto. Cuando el usuario selecciona una imagen, se activa un evento onChange en el campo de entrada del archivo y podemos usar la clase FileReader() de JavaScript para mostrar temporalmente la imagen para obtener una vista previa.
Cuando el usuario hace clic en el botón 'Guardar usuario', el formulario de entrada se enviará a la misma página. Entonces, en esa misma página form.php, estamos incluyendo un archivo processForm.php que contiene el código para procesar nuestro formulario.
Entonces, en la carpeta raíz del proyecto, cree un archivo llamado processForm.php;
procesarForm.php:
<?php
$msg = "";
$msg_class = "";
$conn = mysqli_connect("localhost", "root", "", "img-upload");
if (isset($_POST['save_profile'])) {
// for the database
$bio = stripslashes($_POST['bio']);
$profileImageName = time() . '-' . $_FILES["profileImage"]["name"];
// For image upload
$target_dir = "images/";
$target_file = $target_dir . basename($profileImageName);
// VALIDATION
// validate image size. Size is calculated in Bytes
if($_FILES['profileImage']['size'] > 200000) {
$msg = "Image size should not be greated than 200Kb";
$msg_class = "alert-danger";
}
// check if file exists
if(file_exists($target_file)) {
$msg = "File already exists";
$msg_class = "alert-danger";
}
// Upload image only if no errors
if (empty($error)) {
if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
$sql = "INSERT INTO users SET profile_image='$profileImageName', bio='$bio'";
if(mysqli_query($conn, $sql)){
$msg = "Image uploaded and saved in the Database";
$msg_class = "alert-success";
} else {
$msg = "There was an error in the database";
$msg_class = "alert-danger";
}
} else {
$error = "There was an erro uploading the file";
$msg = "alert-danger";
}
}
}
?>
Este código recibe los valores de entrada que se enviaron desde el formulario. Esta entrada consiste en la imagen del usuario y la biografía. En el servidor, podemos acceder al archivo de imagen y a toda la información relacionada con la imagen, como el nombre de la imagen, el tamaño, la extensión, etc., en la variable súper global $_FILE[], mientras que otra información, como el texto, se encuentra en $_POST[] variable superglobal.
Usando la información en la variable súper global $_FILE[], podemos validar la imagen. Por ejemplo, nuestro código fuente solo puede aceptar imágenes cuyo tamaño sea inferior a 200 kb. Por supuesto, siempre puede cambiar este valor si lo desea.
Notará en el código anterior que nos estamos conectando a una base de datos llamada img-upload. Cree esta base de datos y cree una tabla llamada usuarios con los siguientes campos:
tabla de usuarios:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Ahora abra el formulario en su navegador e ingrese alguna información. Si todo salió bien, su imagen se cargará en la carpeta de imágenes de su proyecto y se guardará un registro correspondiente en la base de datos.
Mostrar imagen desde la base de datos
Una vez que nuestra imagen está en la base de datos, mostrarla es pan comido. Cree un archivo en la carpeta raíz y asígnele el nombre profiles.php.
perfiles.php:
<?php
$conn = mysqli_connect("localhost", "root", "", "img-upload");
$results = mysqli_query($conn, "SELECT * FROM users");
$users = mysqli_fetch_all($results, MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4" style="margin-top: 30px;">
<a href="form.php" class="btn btn-success">New profile</a>
<br>
<br>
<table class="table table-bordered">
<thead>
<th>Image</th>
<th>Bio</th>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td> <img src="<?php echo 'images/' . $user['profile_image'] ?>" width="90" height="90" alt=""> </td>
<td> <?php echo $user['bio']; ?> </td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
¡Sencillo! Este archivo se conecta a la base de datos, consulta toda la información de perfil de la tabla de usuarios y enumera los perfiles de usuario en un formato tabular que muestra la imagen de perfil de cada usuario contra su biografía. Una imagen se muestra simplemente usando el nombre de la imagen de la base de datos y apuntando a la carpeta de imágenes donde reside la imagen.
Conclusión
Espero que hayas disfrutado este breve tutorial. Si tiene alguna pregunta, déjela en los comentarios a continuación.
Recuerda apoyar compartiendo.
Que lo pases bien.
