एक छवि अपलोड सुविधा पर उपयोगकर्ता अनुभव में काफी सुधार किया जा सकता है यदि हम उपयोगकर्ता को उस छवि का पूर्वावलोकन करने में सक्षम करते हैं जिसे उन्होंने वास्तव में अपलोड बटन पर क्लिक करके सर्वर पर अपलोड करने से पहले चुना है।
इस ट्यूटोरियल में, हम एक फॉर्म तैयार करेंगे जो दो इनपुट लेता है:उपयोगकर्ता का प्रोफ़ाइल चित्र (छवि), और उनका बायो (पाठ)। जब उपयोगकर्ता फॉर्म भरता है और अपलोड बटन पर क्लिक करता है, तो हम फॉर्म वैल्यू (इमेज और बायो) को हथियाने के लिए अपनी PHP स्क्रिप्ट का उपयोग करेंगे और इमेज को इमेज नामक प्रोजेक्ट फोल्डर में सेव करेंगे। प्रोजेक्ट फ़ोल्डर में छवि सहेजे जाने के बाद, हम छवि नाम और उपयोगकर्ता के बायो वाले डेटाबेस में एक रिकॉर्ड संग्रहीत करेंगे।
इस जानकारी को सहेजने के बाद, हम एक और पेज बनाएंगे जो डेटाबेस से उपयोगकर्ता प्रोफाइल को क्वेरी करता है, उन्हें प्रत्येक उपयोगकर्ता के बायो के साथ उनकी प्रोफाइल पिक्चर के साथ पेज पर प्रदर्शित करता है।
तो चलिए कार्यान्वयन के साथ शुरुआत करते हैं।
एक प्रोजेक्ट फोल्डर बनाएं और इसे इमेज-प्रीव्यू-अपलोड कहें। इस फोल्डर के अंदर फॉर्म.php नाम की एक फाइल बनाएं और इमेजेज को स्टोर करने के लिए इमेजेज नाम का फोल्डर बनाएं।
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>इससे पहले कि मैं फ़ॉर्म के बारे में कुछ कहूँ, आइए सबसे पहले अपने प्रोजेक्ट के रूट फ़ोल्डर में फ़ॉर्म के लिए main.css नाम की एक स्टाइलिंग फ़ाइल बनाएँ।
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;
}
हमारी form.php फ़ाइल की पहली पंक्ति में, हम एक फ़ाइल शामिल कर रहे हैं जिसमें हमारी PHP स्क्रिप्ट है जो प्रपत्र मान प्राप्त करने और उन्हें संसाधित करने के लिए जिम्मेदार है (अर्थात, छवि फ़ोल्डर में छवि को सहेजना और उपयोगकर्ता तालिका में संबंधित रिकॉर्ड बनाना) डेटाबेस में)।
यदि आप प्रपत्र पर एक नज़र डालते हैं, तो आप देखेंगे कि हम CSS गुण प्रदर्शन का मान कोई नहीं पर सेट कर रहे हैं; हम ऐसा इसलिए कर रहे हैं क्योंकि हम फ़ाइल अपलोड के लिए डिफ़ॉल्ट HTML इनपुट तत्व प्रदर्शित नहीं करना चाहते हैं। इसके बजाय, हम एक अलग तत्व बनाएंगे और इसे अपनी इच्छानुसार स्टाइल करेंगे और फिर जब उपयोगकर्ता हमारे तत्व पर क्लिक करेगा, तो हम HTML फ़ाइल इनपुट तत्व को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग करेंगे जो हमारे लिए छिपा हुआ है।
अब फ़ाइल इनपुट तत्व को ट्रिगर करने और फिर पूर्वावलोकन के लिए छवि प्रदर्शित करने के लिए जिम्मेदार स्क्रिप्ट जोड़ें।
अपने आवेदन के मूल में scripts.js नामक एक फ़ाइल बनाएँ और इसमें यह कोड जोड़ें:
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]);
}
}
अब जब उपयोगकर्ता गोल छवि क्षेत्र पर क्लिक करता है, तो फ़ंक्शन ट्रिगरक्लिक () छिपे हुए फ़ाइल इनपुट तत्व पर एक क्लिक ईवेंट को ट्रिगर करेगा। जब उपयोगकर्ता एक छवि का चयन करता है, तो फ़ाइल इनपुट फ़ील्ड पर एक ऑनचेंज घटना शुरू हो जाती है और हम पूर्वावलोकन के लिए छवि को अस्थायी रूप से प्रदर्शित करने के लिए जावास्क्रिप्ट के FileReader () वर्ग का उपयोग कर सकते हैं।
जब उपयोगकर्ता 'सेव यूजर' बटन पर क्लिक करता है, तो इनपुट फॉर्म उसी पेज पर सबमिट हो जाएगा। तो उसी form.php पेज पर, हम एक processForm.php फाइल को शामिल कर रहे हैं जिसमें हमारे फॉर्म को प्रोसेस करने के लिए कोड होता है।
तो प्रोजेक्ट के रूट फोल्डर में 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";
}
}
}
?>
यह कोड फ़ॉर्म से सबमिट किए गए इनपुट मान प्राप्त करता है। इस इनपुट में यूजर इमेज और बायो शामिल हैं। सर्वर पर, हम $_FILE[] सुपर ग्लोबल वैरिएबल में इमेज फ़ाइल और इमेज से जुड़ी सभी जानकारी जैसे इमेज का नाम, आकार, एक्सटेंशन आदि एक्सेस कर सकते हैं, जबकि टेक्स्ट जैसी अन्य जानकारी $_POST[] में मिलती है। सुपरग्लोबल वैरिएबल।
$_FILE[] सुपर ग्लोबल वैरिएबल में मौजूद जानकारी का इस्तेमाल करके, हम इमेज की पुष्टि कर सकते हैं. उदाहरण के लिए, हमारा स्रोत कोड केवल उन छवियों को स्वीकार कर सकता है जिनका आकार 200kb से कम है। बेशक, आप चाहें तो इस मान को कभी भी बदल सकते हैं।
आप ऊपर दिए गए कोड में देखते हैं कि हम img-upload नामक डेटाबेस से जुड़ रहे हैं। इस डेटाबेस को बनाएं और निम्न फ़ील्ड वाले उपयोगकर्ता नामक तालिका बनाएं:
उपयोगकर्ता तालिका:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)अब अपने ब्राउज़र पर फॉर्म खोलें और कुछ जानकारी इनपुट करें। यदि सब कुछ ठीक रहा, तो आपकी छवि आपके प्रोजेक्ट में छवि फ़ोल्डर में अपलोड हो जाएगी और डेटाबेस में सहेजा गया संबंधित रिकॉर्ड।
डेटाबेस से छवि प्रदर्शित करना
एक बार हमारी छवि डेटाबेस में है, इसे प्रदर्शित करना एक हवा है। रूट फोल्डर में एक फाइल बनाएं और इसे 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>
सरल! यह फ़ाइल डेटाबेस से जुड़ती है, उपयोगकर्ता तालिका से सभी प्रोफ़ाइल जानकारी पूछती है और उपयोगकर्ता प्रोफ़ाइल को एक सारणीबद्ध प्रारूप में सूचीबद्ध करती है जो प्रत्येक उपयोगकर्ता की प्रोफ़ाइल छवि को उनके बायो के विरुद्ध प्रदर्शित करती है। एक छवि को केवल डेटाबेस से छवि नाम का उपयोग करके और छवि फ़ोल्डर की ओर इशारा करते हुए प्रदर्शित किया जाता है जहां छवि रहती है।
निष्कर्ष
मुझे आशा है कि आपको यह छोटा ट्यूटोरियल अच्छा लगा होगा। यदि आपके कोई प्रश्न हैं, तो इसे नीचे टिप्पणी में छोड़ दें।
साझा करके समर्थन करना न भूलें।
अच्छा समय बिताएं।
