De gebruikerservaring van een functie voor het uploaden van afbeeldingen kan aanzienlijk worden verbeterd als we de gebruiker in staat stellen een voorbeeld van de geselecteerde afbeelding te bekijken voordat deze daadwerkelijk naar de server wordt geüpload door op de uploadknop te klikken.
In deze zelfstudie zullen we een formulier maken dat twee invoer nodig heeft:de profielfoto van de gebruiker (afbeelding) en hun biografie (tekst). Wanneer de gebruiker het formulier invult en op de uploadknop klikt, gebruiken we ons PHP-script om de formulierwaarden (de afbeelding en de bio) te pakken en de afbeelding op te slaan in onze projectmap met de naam afbeeldingen. Zodra de afbeelding is opgeslagen in de projectmap, slaan we een record op in de database met de afbeeldingsnaam en de biografie van de gebruiker.
Nadat we deze informatie hebben opgeslagen, maken we een andere pagina die de gebruikersprofielen opvraagt uit de database en ze op de pagina weergeeft met de biografie van elke gebruiker tegen hun profielfoto.
Dus laten we beginnen met de implementatie.
Maak een projectmap en noem deze image-preview-upload. Maak in deze map een bestand met de naam form.php en een map met de naam afbeeldingen om de afbeeldingen op te slaan.
formulier.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>Voordat ik iets over het formulier zeg, laten we eerst een stijlbestand maken met de naam main.css voor het formulier in de hoofdmap van ons project.
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;
}
Op de eerste regel van ons form.php-bestand nemen we een bestand op dat ons PHP-script bevat dat verantwoordelijk is voor het ontvangen van de formulierwaarden en het verwerken ervan (dat wil zeggen, het opslaan van de afbeelding in de afbeeldingenmap en het maken van een corresponderend record in de gebruikerstabel in de database).
Als u naar het formulier kijkt, ziet u dat we de waarde van de weergave van de CSS-eigenschap op geen zetten; We doen dit omdat we het standaard HTML-invoerelement voor het uploaden van bestanden niet willen weergeven. In plaats daarvan zullen we een ander element maken en het stylen zoals we willen en wanneer de gebruiker op ons element klikt, zullen we JavaScript onder de motorkap gebruiken om het HTML-bestandsinvoerelement te activeren dat voor ons verborgen is.
Laten we nu de scripts toevoegen die verantwoordelijk zijn voor het activeren van het bestandsinvoerelement en vervolgens ook voor het weergeven van de afbeelding voor voorbeeld.
Maak een bestand met de naam scripts.js in de hoofdmap van uw toepassing en voeg deze code eraan toe:
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]);
}
}
Wanneer de gebruiker nu op het ronde afbeeldingsgebied klikt, activeert de functie triggerClick() een klikgebeurtenis op het invoerelement voor verborgen bestanden. Wanneer de gebruiker een afbeelding selecteert, wordt een onChange-gebeurtenis geactiveerd in het bestandsinvoerveld en kunnen we de FileReader()-klasse van JavaScript gebruiken om de afbeelding tijdelijk weer te geven voor een voorbeeld.
Wanneer de gebruiker op de knop 'Gebruiker opslaan' klikt, wordt het invoerformulier naar dezelfde pagina verzonden. Dus op diezelfde form.php-pagina nemen we een processForm.php-bestand op dat de code bevat om ons formulier te verwerken.
Dus maak in de hoofdmap van het project een bestand aan met de naam 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";
}
}
}
?>
Deze code ontvangt de invoerwaarden die zijn ingediend via het formulier. Deze input bestaat uit het gebruikersbeeld en de bio. Op de server hebben we toegang tot het afbeeldingsbestand en alle gerelateerde afbeeldingsinformatie, zoals de afbeeldingsnaam, grootte, extensie, enzovoort, in de super globale variabele $_FILE[], terwijl andere informatie, zoals tekst, wordt gevonden in de $_POST[] superglobale variabele.
Met behulp van de informatie in de super globale variabele $_FILE[] kunnen we de afbeelding valideren. Onze broncode kan bijvoorbeeld alleen afbeeldingen accepteren waarvan de grootte kleiner is dan 200 kb. Je kunt deze waarde natuurlijk altijd wijzigen als je wilt.
Je merkt in de bovenstaande code dat we verbinding maken met een database genaamd img-upload. Maak deze database aan en maak een tabel met de naam gebruikers met de volgende velden:
gebruikerstabel:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Open nu het formulier in uw browser en voer wat informatie in. Als alles goed is gegaan, wordt uw afbeelding geüpload naar de afbeeldingenmap in uw project en wordt een bijbehorend record opgeslagen in de database.
Afbeelding uit database weergeven
Zodra onze afbeelding in de database staat, is het weergeven ervan een fluitje van een cent. Maak een bestand in de hoofdmap en noem hetprofiles.php.
profielen.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>
Gemakkelijk! Dit bestand maakt verbinding met de database, bevraagt alle profielinformatie uit de gebruikerstabel en geeft de gebruikersprofielen weer in een tabelvorm waarin de profielafbeelding van elke gebruiker wordt weergegeven tegen hun bio. Een afbeelding wordt eenvoudig weergegeven door de afbeeldingsnaam uit de database te gebruiken en naar de afbeeldingenmap te wijzen waar de afbeelding zich bevindt.
Conclusie
Ik hoop dat je genoten hebt van deze korte tutorial. Als je vragen hebt, laat het dan achter in de reacties hieronder.
Vergeet niet te steunen door te delen.
Veel plezier.