Användarupplevelsen kan förbättras avsevärt på en bilduppladdningsfunktion om vi gör det möjligt för användaren att förhandsgranska bilden de har valt innan de faktiskt laddar upp den till servern genom att klicka på uppladdningsknappen.
I den här handledningen kommer vi att skapa ett formulär som tar två ingångar:användarens profilbild (bild) och deras biografi (text). När användaren fyller i formuläret och klickar på uppladdningsknappen kommer vi att använda vårt PHP-skript för att ta tag i formulärvärdena (bilden och bion) och spara bilden i vår projektmapp som heter bilder. När bilden har sparats i projektmappen kommer vi att lagra en post i databasen som innehåller bildnamnet och användarens biografi.
När vi har sparat denna information kommer vi att skapa en annan sida som frågar efter användarprofilerna från databasen och visar dem på sidan med varje användares biografi mot deras profilbild.
Så låt oss komma igång med implementeringen.
Skapa en projektmapp och kalla den image-preview-upload. Inuti den här mappen skapar du en fil som heter form.php och en mapp som heter bilder för att lagra bilderna.
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>Innan jag säger något om formuläret, låt oss först och främst skapa en stilfil med namnet main.css för formuläret i rotmappen i vårt projekt.
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;
}
På den första raden i vår form.php-fil inkluderar vi en fil som innehåller vårt PHP-skript som ansvarar för att ta emot formulärvärdena och bearbeta dem (det vill säga att spara bilden i mappen bilder och skapa en motsvarande post i användartabellen i databasen).
Om du tittar på formuläret kommer du att se att vi sätter värdet på CSS-egenskapsvisningen till inget; Vi gör detta för att vi inte vill visa standardinmatningselementet för HTML för filuppladdning. Istället kommer vi att skapa ett annat element och utforma det som vi vill och sedan när användaren klickar på vårt element kommer vi att använda JavaScript under huven för att utlösa HTML-filinmatningselementet som är dolt för oss.
Låt oss nu lägga till skripten som är ansvariga för att trigga filinmatningselementet och sedan även visa bilden för förhandsgranskning.
Skapa en fil som heter scripts.js i roten av din applikation och lägg till den här koden:
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]);
}
}
När användaren nu klickar på det runda bildområdet kommer funktionen triggerClick() att utlösa en klickhändelse på det dolda filinmatningselementet. När användaren väljer en bild utlöses en onChange-händelse i filinmatningsfältet och vi kan använda JavaScripts FileReader()-klass för att tillfälligt visa bilden för förhandsgranskning.
När användaren klickar på knappen "Spara användare" skickas inmatningsformuläret till samma sida. Så på samma form.php-sida inkluderar vi en processForm.php-fil som innehåller koden för att behandla vårt formulär.
Så skapa en fil med namnet processForm.php;
i projektets rotmappprocessForm.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";
}
}
}
?>
Den här koden tar emot indatavärdena som skickades från formuläret. Denna ingång består av användarbilden och bio. På servern kan vi komma åt bildfilen och all relaterad bildinformation som bildnamn, storlek, tillägg etc, i den superglobala variabeln $_FILE[] medan annan information som text finns i $_POST[] superglobal variabel.
Med hjälp av informationen i den superglobala variabeln $_FILE[] kan vi validera bilden. Till exempel kan vår källkod bara acceptera bilder vars storlek är mindre än 200 kb. Naturligtvis kan du alltid ändra detta värde om du vill.
Du märker i koden ovan att vi ansluter till en databas som heter img-upload. Skapa denna databas och skapa en tabell som heter användare med följande fält:
användartabell:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Öppna nu formuläret i din webbläsare och ange lite information. Om allt gick bra kommer din bild att laddas upp till bildmappen i ditt projekt och en motsvarande post sparas i databasen.
Visar bild från databasen
När vår bild väl finns i databasen går det enkelt att visa den. Skapa en fil i rotmappen och namnge den 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>
Enkel! Den här filen ansluter till databasen, frågar efter all profilinformation från användartabellen och listar användarprofilerna i ett tabellformat som visar varje användares profilbild mot deras biografi. En bild visas helt enkelt genom att använda bildnamnet från databasen och peka på bildmappen där bilden finns.
Slutsats
Jag hoppas att du gillade denna korta handledning. Om du har några frågor, skriv det i kommentarerna nedan.
Kom ihåg att stödja genom att dela.
Ha det så trevligt.