تصميم صندوق لرفع الصور بعد ضغطها بواسطة PHP
21-12-2021
1145
تصميم المواقع و التطبيقات
NewMedieneبسم الله الرحمن الرحيم ، عند تصميم الموقع دائما ما
نسعى لتخفيفه و تسريعه ليتسنى للزوار تصفح الصفحات الخاصة به بشكل أفضل و
بدون إزعاج و السبب الأكثر شيوعا في تثقيل ظهور الصفحات على المواقع هي
الصور عندما تكون كبيرة الحجم و مع التطور الملحوظ في الهواتف الحديثة فإنها
دائما ما تتعدى 5ميغا ، لذلك يجب أن نقوم بضغطها قبل رفعها بواسطة php توجد
فكرة بسيطة أردت أن أشاركها معكم.
في هذا المثال نحتاج القليل من أكواد البرمجة PHP - HTML - CSS
1- مجلد files يتم رفع الصور داخله يجب ننشأه أولا
2- ملف index.php سيكون بمثابة الصفحة التي بها أداة أو صندوق رفع الصور
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<style>
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
*,*:before,*:after {
padding: 0;
margin: 0;
}
.container {
margin: 0 auto;
max-width: 450px;
font-family: 'Cairo', sans-serif;
font-size: 10pt;
}
.logo a img{
float: right;
width: 70%;
margin: 30px 15%;
}
.msg {
float: right;
width: 90%;
padding: 5px 5%;
background-color: yellow;
margin-bottom: 10px;
color: #333333;
text-align: center;
}
#forminput {
float: right;
width: 90%;
padding: 5%;
background-color: #cccccc;
}#forminput h3 {
float: right;
width: 100%;
padding: 5px 0px;
text-align: center;
background-color: #333333;
color: white;
}#forminput input[type="submit"]{
cursor:pointer;
float: left;
padding: 5px 15px;
background-color: green;
color: white;
font-family: 'Cairo', sans-serif;
}#forminput input[type="file"]{
float: right;
width: 90%;
padding: 5%;
}
</style>
<link rel="icon" href="http://www.dzworkers.com/files/logo/icon.png" >
<title>Compress Img</title>
</head>
<body>
<div class="container" >
<div class="logo" ><a href="http://www.dzworkers.com" ><img src="http://www.dzworkers.com/files/logo/logo.jpeg" /></a></div>
<?php
// -- DZWORKERS.COM ---------------- /|
// -- DESIGN BY AMMANI BOUMEDIENE -- /|
// -- 12-2021 | ALGERIA SBA -------- /|
// -- FB.COM/NEWMEDIENE ------------ /|
// Compress image
function compressImage($source, $destination, $quality) {
$info = getimagesize($source);
if ($info['mime'] == 'image/jpeg'){
$image = imagecreatefromjpeg($source);
}else if ($info['mime'] == 'image/gif'){
$image = imagecreatefromgif($source);
}else if ($info['mime'] == 'image/png'){
$image = imagecreatefrompng($source);
}
imagejpeg($image, $destination, $quality);
}
// Add Image
if(isset($_POST['add'])){
$ImgName = $_FILES['photo']['name'];
$ImgType = $_FILES['photo']['type'];
$ImgSize = $_FILES['photo']['size']/1024/1024;
$ImgData = $_FILES['photo']['tmp_name'];
$name = "files/".time().str_replace("image/",".",$ImgType);
$size = 5;//MO
$ImgTypeArray = array('image/jpeg', 'image/jpg', 'image/png', 'image/gif');
if(!empty($_FILES['photo'])){
if (!in_array($ImgType,$ImgTypeArray)) {
echo "<div class='msg' >الصيغة التي إخترتها ليست مقبولة .</div>";
}if($ImgSize > $size) {
echo "<div class='msg' >لا يجب أن تتعدى ".$size." ميغا</div>";
}else {
compressImage($ImgData,$name,60);
echo "<div class='msg' >تم رفع الصورة بنجاحـ</div>";
}
}else {
echo "<div class='msg' >إختر ما يجب رفعه ، الخانة فارغة عذرا</div>";
}
}// --- ?>
<form id="forminput" method="POST" enctype="multipart/form-data" >
<h3 class="title" >إضافة صورة جديدة</h3>
<input type="file" name="photo" accept="image/*" required>
<input type="submit" name="add" value="رفعـ الصورة" >
</form>
</div>
</body>
</html>
