Doświadczenie użytkownika można znacznie poprawić dzięki funkcji przesyłania obrazu, jeśli umożliwimy użytkownikowi podgląd wybranego obrazu przed faktycznym przesłaniem go na serwer, klikając przycisk przesyłania.
W tym samouczku utworzymy formularz, który pobiera dwa dane wejściowe:zdjęcie profilowe użytkownika (obraz) i jego bio (tekst). Gdy użytkownik wypełni formularz i kliknie przycisk przesyłania, użyjemy naszego skryptu PHP, aby pobrać wartości formularza (obraz i biografię) i zapisać obraz w naszym folderze projektu o nazwie images. Po zapisaniu obrazu w folderze projektu zapiszemy w bazie danych rekord zawierający nazwę obrazu i biografię użytkownika.
Po zapisaniu tych informacji utworzymy kolejną stronę, która prześle zapytanie do profili użytkowników z bazy danych i wyświetli je na stronie z biografią każdego użytkownika obok jego zdjęcia profilowego.
Zacznijmy więc od implementacji.
Utwórz folder projektu i nazwij go image-preview-upload. Wewnątrz tego folderu utwórz plik o nazwie form.php i folder o nazwie images do przechowywania obrazów.
formularz.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>Zanim powiem cokolwiek o formularzu, najpierw utwórzmy plik stylów o nazwie main.css dla formularza w folderze głównym naszego projektu.
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;
}
W pierwszym wierszu naszego pliku form.php dołączamy plik, który zawiera nasz skrypt PHP odpowiedzialny za odbieranie wartości formularza i ich przetwarzanie (czyli zapisanie obrazka w folderze images i utworzenie odpowiedniego rekordu w tabeli użytkowników w bazie danych).
Jeśli spojrzysz na formularz, zobaczysz, że ustawiamy wartość wyświetlanej właściwości CSS na none; Robimy to, ponieważ nie chcemy wyświetlać domyślnego elementu wejściowego HTML do przesyłania plików. Zamiast tego utworzymy inny element i nadamy mu styl tak, jak chcemy, a następnie, gdy użytkownik kliknie nasz element, użyjemy JavaScript pod maską, aby uruchomić element wejściowy pliku HTML, który jest dla nas ukryty.
Dodajmy teraz skrypty odpowiedzialne za wyzwalanie elementu wejściowego pliku, a następnie wyświetlanie obrazu do podglądu.
Utwórz plik o nazwie scripts.js w katalogu głównym aplikacji i dodaj do niego następujący kod:
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]);
}
}
Teraz, gdy użytkownik kliknie okrągły obszar obrazu, funkcja triggerClick() wyzwoli zdarzenie kliknięcia na ukrytym elemencie wejściowym pliku. Gdy użytkownik wybierze obraz, zdarzenie onChange jest wyzwalane w polu wejściowym pliku i możemy użyć klasy FileReader() JavaScript, aby tymczasowo wyświetlić obraz do podglądu.
Gdy użytkownik kliknie przycisk „Zapisz użytkownika”, formularz wejściowy zostanie przesłany na tę samą stronę. Tak więc na tej samej stronie form.php dołączamy plik processForm.php, który zawiera kod do przetwarzania naszego formularza.
Więc w folderze głównym projektu utwórz plik o nazwie 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";
}
}
}
?>
Ten kod odbiera wartości wejściowe przesłane z formularza. To wejście składa się z obrazu użytkownika i biografii. Na serwerze możemy uzyskać dostęp do pliku obrazu i wszystkich powiązanych informacji o obrazie, takich jak nazwa obrazu, rozmiar, rozszerzenie itp., w zmiennej superglobalnej $_FILE[], podczas gdy inne informacje, takie jak tekst, znajdują się w $_POST[] zmienna superglobalna.
Korzystając z informacji zawartych w superzmiennej globalnej $_FILE[], możemy zweryfikować obraz. Na przykład nasz kod źródłowy może akceptować tylko obrazy o rozmiarze mniejszym niż 200 KB. Oczywiście zawsze możesz zmienić tę wartość, jeśli chcesz.
Zauważysz w powyższym kodzie, że łączymy się z bazą danych o nazwie img-upload. Utwórz tę bazę danych i utwórz tabelę o nazwie użytkownicy z następującymi polami:
tabela użytkowników:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Teraz otwórz formularz w przeglądarce i wprowadź informacje. Jeśli wszystko poszło dobrze, twój obraz zostanie przesłany do folderu obrazów w twoim projekcie, a odpowiedni rekord zostanie zapisany w bazie danych.
Wyświetlanie obrazu z bazy danych
Gdy nasz obraz znajdzie się w bazie danych, wyświetlenie go jest bardzo proste. Utwórz plik w folderze głównym i nadaj mu nazwę profile.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>
Jedyny! Ten plik łączy się z bazą danych, wysyła zapytanie o wszystkie informacje o profilu z tabeli użytkowników i wyświetla profile użytkowników w formacie tabelarycznym, wyświetlając obraz profilu każdego użytkownika na tle jego biografii. Obraz jest wyświetlany po prostu przy użyciu nazwy obrazu z bazy danych i wskazując folder obrazów, w którym znajduje się obraz.
Wniosek
Mam nadzieję, że podobał Ci się ten krótki samouczek. Jeśli masz jakieś pytania, zostaw je w komentarzach poniżej.
Pamiętaj o wsparciu przez udostępnianie.
Miłego czasu.
