L'expérience utilisateur peut être grandement améliorée sur une fonction de téléchargement d'image si nous permettons à l'utilisateur de prévisualiser l'image qu'il a sélectionnée avant de la télécharger sur le serveur en cliquant sur le bouton de téléchargement.
Dans ce didacticiel, nous allons créer un formulaire qui prend deux entrées :la photo de profil de l'utilisateur (image) et sa biographie (texte). Lorsque l'utilisateur remplit le formulaire et clique sur le bouton de téléchargement, nous utiliserons notre script PHP pour saisir les valeurs du formulaire (l'image et la bio) et enregistrer l'image dans notre dossier de projet appelé images. Une fois l'image enregistrée dans le dossier du projet, nous stockerons un enregistrement dans la base de données contenant le nom de l'image et la biographie de l'utilisateur.
Après avoir enregistré ces informations, nous allons créer une autre page qui interroge les profils d'utilisateur de la base de données et les affiche sur la page avec la biographie de chaque utilisateur par rapport à sa photo de profil.
Alors commençons par la mise en œuvre.
Créez un dossier de projet et appelez-le image-preview-upload. Dans ce dossier, créez un fichier appelé form.php et un dossier appelé images pour stocker les images.
formulaire.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>Avant de dire quoi que ce soit sur le formulaire, créons d'abord un fichier de style nommé main.css pour le formulaire dans le dossier racine de notre projet.
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;
}
Sur la première ligne de notre fichier form.php, nous incluons un fichier qui contient notre script PHP chargé de recevoir les valeurs du formulaire et de les traiter (c'est-à-dire d'enregistrer l'image dans le dossier images et de créer un enregistrement correspondant dans la table des utilisateurs dans la base de données).
Si vous regardez le formulaire, vous verrez que nous définissons la valeur de la propriété CSS display sur none; Nous faisons cela parce que nous ne voulons pas afficher l'élément d'entrée HTML par défaut pour le téléchargement de fichiers. Au lieu de cela, nous allons créer un élément différent et le styler comme nous le souhaitons, puis lorsque l'utilisateur cliquera sur notre élément, nous utiliserons JavaScript sous le capot pour déclencher l'élément d'entrée de fichier HTML qui nous est caché.
Ajoutons maintenant les scripts chargés de déclencher l'élément d'entrée de fichier, puis d'afficher également l'image pour l'aperçu.
Créez un fichier appelé scripts.js à la racine de votre application et ajoutez-y ce code :
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]);
}
}
Désormais, lorsque l'utilisateur clique sur la zone d'image ronde, la fonction triggerClick() déclenchera un événement de clic sur l'élément d'entrée de fichier caché. Lorsque l'utilisateur sélectionne une image, un événement onChange est déclenché sur le champ de saisie du fichier et nous pouvons utiliser la classe FileReader() de JavaScript pour afficher temporairement l'image pour un aperçu.
Lorsque l'utilisateur clique sur le bouton "Enregistrer l'utilisateur", le formulaire de saisie sera soumis à la même page. Donc, sur cette même page form.php, nous incluons un fichier processForm.php qui contient le code pour traiter notre formulaire.
Donc dans le dossier racine du projet créez un fichier nommé 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";
}
}
}
?>
Ce code reçoit les valeurs d'entrée qui ont été soumises à partir du formulaire. Cette entrée se compose de l'image de l'utilisateur et de la biographie. Sur le serveur, nous pouvons accéder au fichier image et à toutes les informations associées à l'image, telles que le nom, la taille, l'extension, etc., de l'image dans la super variable globale $_FILE[], tandis que d'autres informations telles que le texte se trouvent dans $_POST[] variable superglobale.
À l'aide des informations de la super variable globale $_FILE[], nous pouvons valider l'image. Par exemple, notre code source ne peut accepter que les images dont la taille est inférieure à 200 Ko. Bien entendu, vous pouvez toujours modifier cette valeur si vous le souhaitez.
Vous remarquez dans le code ci-dessus que nous nous connectons à une base de données appelée img-upload. Créez cette base de données et créez une table appelée utilisateurs avec les champs suivants :
tableau des utilisateurs :
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Ouvrez maintenant le formulaire sur votre navigateur et saisissez quelques informations. Si tout s'est bien passé, votre image sera téléchargée dans le dossier images de votre projet et un enregistrement correspondant sera enregistré dans la base de données.
Afficher l'image de la base de données
Une fois notre image dans la base de données, l'afficher est un jeu d'enfant. Créez un fichier dans le dossier racine et nommez-le 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! Ce fichier se connecte à la base de données, interroge toutes les informations de profil à partir de la table des utilisateurs et répertorie les profils d'utilisateurs dans un format tabulaire affichant l'image de profil de chaque utilisateur par rapport à sa biographie. Une image est affichée simplement en utilisant le nom de l'image de la base de données et en pointant vers le dossier d'images où réside l'image.
Conclusion
J'espère que vous avez apprécié ce petit tutoriel. Si vous avez des questions, déposez-les dans les commentaires ci-dessous.
N'oubliez pas de soutenir en partageant.
Passez un bon moment.
