La experiencia del usuario se puede mejorar enormemente 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 en el servidor haciendo clic en el botón de carga.
En este tutorial, crearemos un formulario que toma dos entradas: la foto de perfil del usuario (imagen) y su biografía (texto). Cuando el usuario llena el formulario y hace 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 la carpeta de nuestro proyecto llamada imágenes. Una vez que la imagen se guarda 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 consulta los perfiles de usuario de la base de datos que los muestra en la página con la biografía de cada usuario contra su foto de perfil.
Así que comencemos con la implementación.
Crea una carpeta de proyecto y llámala imagen-vista previa-carga. Dentro de esta carpeta, cree un archivo llamado form.php y una carpeta llamada imagenes para almacenar las imágenes.
form.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 decir algo sobre el formulario, primero creemos un archivo de estilo llamado main.css para el formulario en la carpeta raíz de nuestro proyecto.
main.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 form.php archivo, estamos incluyendo 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 echa un vistazo al formulario, verá que estamos configurando el valor de la propiedad CSS monitor a ninguna; Hacemos 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 aplicaremos 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 los scripts responsables de activar el elemento de entrada del archivo y luego también mostrar la imagen para obtener una vista previa.
Cree un archivo llamado scripts.js en la raíz de su aplicación y agréguele este código:
script.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 hace 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, un onChange El evento se activa en el campo de entrada del archivo y podemos usar JavaScript FileReader () class para mostrar temporalmente la imagen para 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 de form.php, estamos incluyendo un processForm.php archivo que contiene el código para procesar nuestro formulario.
Entonces, en la carpeta raíz del proyecto, cree un archivo llamado processForm.php;
processForm.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 consta de 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 el $ _FILE[] super variable global, mientras que otra información como el texto se encuentra en el $ _POST[] variable superglobal.
Usando la información en el $ _FILE[] super variable global, 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.
Observa 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:
usuarios chaquete:
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 información. Si todo salió bien, su imagen se subirá a la imagenes carpeta en su proyecto y un registro correspondiente guardado en la base de datos.
Visualización de la imagen de la base de datos
Una vez que nuestra imagen está en la base de datos, mostrarla es muy sencillo. Cree un archivo en la carpeta raíz y asígnele un nombre profiles.php.
profiles.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>
¡Simple! 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 con su biografía. Una imagen se muestra simplemente usando el nombre de la imagen de la base de datos y apuntando al imagenes carpeta donde reside la imagen.
Conclusión
Espero que hayas disfrutado de este breve tutorial. Si tiene alguna pregunta, déjela en los comentarios a continuación.
Recuerda apoyar compartiendo.
Pasar un buen rato.
Awa Melvine