Die Benutzererfahrung kann bei einer Bild-Upload-Funktion erheblich verbessert werden, wenn wir dem Benutzer ermöglichen, eine Vorschau des ausgewählten Bildes anzuzeigen, bevor er es tatsächlich auf den Server hochlädt, indem er auf die Schaltfläche zum Hochladen klickt.
In diesem Tutorial erstellen wir ein Formular, das zwei Eingaben benötigt:das Profilbild des Benutzers (Bild) und seine Biografie (Text). Wenn der Benutzer das Formular ausfüllt und auf die Schaltfläche zum Hochladen klickt, verwenden wir unser PHP-Skript, um die Formularwerte (das Bild und die Biografie) abzurufen und das Bild in unserem Projektordner mit dem Namen Bilder zu speichern. Sobald das Bild im Projektordner gespeichert ist, speichern wir einen Datensatz in der Datenbank, der den Bildnamen und die Biografie des Benutzers enthält.
Nach dem Speichern dieser Informationen erstellen wir eine weitere Seite, die die Benutzerprofile aus der Datenbank abfragt und sie auf der Seite mit der Biografie jedes Benutzers und seinem Profilbild anzeigt.
Beginnen wir also mit der Implementierung.
Erstellen Sie einen Projektordner und nennen Sie ihn image-preview-upload. Erstellen Sie in diesem Ordner eine Datei namens form.php und einen Ordner namens images zum Speichern der Bilder.
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>Bevor ich etwas über das Formular sage, erstellen wir zunächst eine Styling-Datei mit dem Namen „main.css“ für das Formular im Stammordner unseres Projekts.
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;
}
In der ersten Zeile unserer form.php-Datei fügen wir eine Datei ein, die unser PHP-Skript enthält, das für den Empfang und die Verarbeitung der Formularwerte verantwortlich ist (d. h. das Speichern des Bildes im Bilderordner und das Erstellen eines entsprechenden Datensatzes in der Benutzertabelle in der Datenbank).
Wenn Sie sich das Formular ansehen, werden Sie sehen, dass wir den Wert der CSS-Eigenschaft display auf none setzen; Wir tun dies, weil wir das Standard-HTML-Eingabeelement für den Dateiupload nicht anzeigen möchten. Stattdessen erstellen wir ein anderes Element und gestalten es nach unseren Wünschen. Wenn der Benutzer dann auf unser Element klickt, verwenden wir JavaScript im Hintergrund, um das Eingabeelement der HTML-Datei auszulösen, das für uns verborgen ist.
Lassen Sie uns nun die Skripte hinzufügen, die dafür verantwortlich sind, das Dateieingabeelement auszulösen und dann auch das Bild für die Vorschau anzuzeigen.
Erstellen Sie eine Datei namens scripts.js im Stammverzeichnis Ihrer Anwendung und fügen Sie diesen Code hinzu:
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]);
}
}
Wenn der Benutzer nun auf den runden Bildbereich klickt, löst die Funktion triggerClick() ein Klickereignis auf dem versteckten Dateieingabeelement aus. Wenn der Benutzer ein Bild auswählt, wird ein onChange-Ereignis im Dateieingabefeld ausgelöst und wir können die FileReader()-Klasse von JavaScript verwenden, um das Bild vorübergehend zur Vorschau anzuzeigen.
Wenn der Benutzer auf die Schaltfläche „Benutzer speichern“ klickt, wird das Eingabeformular an dieselbe Seite gesendet. Auf derselben form.php-Seite fügen wir also eine processForm.php-Datei ein, die den Code zum Verarbeiten unseres Formulars enthält.
Erstellen Sie also im Stammordner des Projekts eine Datei namens 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";
}
}
}
?>
Dieser Code empfängt die Eingabewerte, die über das Formular übermittelt wurden. Diese Eingabe besteht aus dem Benutzerbild und der Biografie. Auf dem Server können wir auf die Bilddatei und alle zugehörigen Bildinformationen wie Bildname, Größe, Erweiterung usw. in der superglobalen Variablen $_FILE[] zugreifen, während andere Informationen wie Text in $_POST[] zu finden sind. superglobale Variable.
Anhand der Informationen in der superglobalen Variable $_FILE[] können wir das Bild validieren. Beispielsweise kann unser Quellcode nur Bilder akzeptieren, deren Größe weniger als 200 KB beträgt. Natürlich können Sie diesen Wert jederzeit ändern, wenn Sie möchten.
Sie bemerken im obigen Code, dass wir eine Verbindung zu einer Datenbank namens img-upload herstellen. Erstellen Sie diese Datenbank und erstellen Sie eine Tabelle namens Benutzer mit den folgenden Feldern:
Benutzertabelle:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Öffnen Sie nun das Formular in Ihrem Browser und geben Sie einige Informationen ein. Wenn alles geklappt hat, wird Ihr Bild in den Bilderordner Ihres Projekts hochgeladen und ein entsprechender Datensatz in der Datenbank gespeichert.
Bild aus Datenbank anzeigen
Sobald sich unser Bild in der Datenbank befindet, ist die Anzeige ein Kinderspiel. Erstellen Sie eine Datei im Stammordner und nennen Sie sie profiles.php.
profile.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>
Einfach! Diese Datei stellt eine Verbindung zur Datenbank her, fragt alle Profilinformationen aus der Benutzertabelle ab und listet die Benutzerprofile in einem tabellarischen Format auf, das das Profilbild jedes Benutzers mit seiner Biografie anzeigt. Ein Bild wird einfach angezeigt, indem der Bildname aus der Datenbank verwendet und auf den Bildordner verwiesen wird, in dem sich das Bild befindet.
Schlussfolgerung
Ich hoffe, Ihnen hat dieses kurze Tutorial gefallen. Wenn Sie Fragen haben, schreiben Sie sie in die Kommentare unten.
Denken Sie daran, durch Teilen zu unterstützen.
Viel Spaß.
