تصميم صندوق لرفع الصور بعد ضغطها بواسطة PHP

21-12-2021

993

تصميم المواقع و التطبيقات 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>