وبلاگ شخصی حامد رستمی

طراح وب و رابط کاربری

وبلاگ شخصی حامد رستمی

طراح وب و رابط کاربری

آموزش ساخت آپلودسنتر ساده با php

دوشنبه, ۲۵ دی ۱۳۹۱، ۰۶:۱۷ ق.ظ

آموزش ساخت آپلود سنتر با php

سلام به همه دوستان

امروز میخوام بهتون یاد بدم که چطوری یه آپلود سنتر ساده  با php  بسازین.

سطح این آموزش مبتدی هست . و سعی شده طوری نوشته بشه که اونایی که تازه دارن php یاد میگیرین هم ازش سردربیارن.

سعی کردم  تا اونجایی که امکان داره ساده توضیح بدم و از اصطلاحات تخصصی استفاده نکنم. دوستانی که یه کم کهنه کار هستن به بزرگی خودشون ببخشن.

 

خب بریم سراغ آموزش ،

برنامه هایی مورد نیز:

  1. ویرایشگر ساده متن مثل notepad++  (میتونین از نرم افزارهای طراحی وب مثل dreamweaver  یا aptana studio  و... هم استفاده کنید)
  2. یه برنامه وب سرور هم میخوام(نترسین همون لوکال هاست خودمون :دی). من از Xampp استفاده میکنم.

اول یه فایل با نام index.php باز کنین.

اینا رو توش کپی کنید. (اگه از نرم افزار های طراحی وب استفاده میکنین. بطور پیشفرض همونجا هستن. دیگه لازم نیست بنویسیدشون)

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>آموزش ساخت آپلود سنتر ساده</title>

</head>

<body>

</body>

</html>

یه فایل دیگه با نام style.css هم باز کنین. (واسه استایل دهی و زیبا سازی هستش. اینو با سلیقه ی خودتون بعدا بسازین. (البته چیزی که ساختم رو توی ضمیمه گذاشتم))

حالا کد زیر رو بین تگ head قرار بدین.

<link href="style.css" type="text/css" rel="stylesheet"  />

با این کار استایل فراخوانی میشه.

از الان هرچی که قرار بنویسیم بین تگ body نوشته میشه.

یه div ایجاد میکنیم. من بهش id=”upload” هم دادم (واسه اینکه بعدا بهش استایل بدم)

 

یه تگ form  باز میکنیم (اونایی که نمیدونن تگ form چیه و به چه در میخوره بهتره اول برن تگهای html رو یاد بگیرن).

> <form آدرس action رو وارد میکنیم(همون جاییه که فایل آپلود شده ما اونجا ارسال میشه. دقت کنین که پوشه نیستا ، یه فایل php که بعد از اینکه ما فایل رو آپلود کردیم ، اطلاعاتش اونجا به نمایش در میاد. مثلا میگه اسم فایل چیه ، حجمش چقدره و... (حالا میرسیم اونجا ، خودتون میبینید).  اسمش رو گذاشتم up-file.php  . شما هم بعد از اینکه اسم رو وارد کردین ، با همون نام یه فایل ایجاد کنید.(توی همون پوشه ای که index.php و style.css رو ساختین.)

method  ارسالی رو  هم گذاشتم روی  post. (method نوع ارسال داده رو مشخص میکنه . get یا post .( مقدارهای ارسالی از طریق get در url نمایش داده میشه ، get یه سری محدودیتهایی هم داره .امنیت post بیشتر از get هست و..  بقیش رو خودتون برین تحقیق کنین )

Enctype هم نوع داده ارسالی به سرور رو مشخص میکنه . چون میخوایم یه آپلود سنتر بسازیم باید بزاریمش روی multipart/form-data.

 چیزی که توی این قسمت توضیح دادم

<form action="up-file.php" method="post" enctype="multipart/form-data" >

یه تگ label هم باز کنید و توش بنویسین: " انتخاب مسیر" (ضروری نیست . واسه همین توضیح نمیدم. اما توی کد نمونه هستش).

بعد از اون باید یه تگ input  با type  ، file  باز کنیم که باهاش بتونیم فایلی رو که میخوایم آپلود رو از کامپیوتر انتخاب کنیم. سایز و اندازش هم بستگی به خودتون داره

مقدار Name رو حتما file بزارین.

مقدار Type هم file باید باشه. چون میخوایم فایل رو از کامپیوتر انتخاب کنیم.

این شکلی :

<input  type="file" name="file"  />

الان باید یه دکمه ای بسازیم که داده هامون رو ارسال کنه. این کار رو با تگ input ا و با type ،submit  انجام میدیم.

Value اسم دکمه رو مشخص میکنه . من اسمش رو گذاشتم : "آپلود کن" . (شما هم هرچی دلتون میخواد بزارین :دی)

اینطوری:

<input type="submit" name="submit" value="آپلود کن" />

 

چیزایی که تا الان نوشتیم:

 

<div id="upload">

<form action="up-file.php" method="post" enctype="multipart/form-data" >

                        <label id="label" for="file"> انتخاب مسیر: </label>

                        <input height="5px" size="30" name="file" type="file" id="file" /><br />

                        <input id="submit" type="submit" name="submit" value="آپلود کن" />

                        </form>

</div>

 

خب به سلامتی ، کارمون با فایل index.php تموم شد. (راحت بود نه ؟!!!)

 

الان میریم فایل up-file.php رو باز میکنیم.

از این به بعد کار اصلیمون با php شروع میشه. (یه جوری گفتم خودمم ترسیدم !!! ولی ناراحت نباشین ، قبلا هم گفتم که سطح مبتدی ، زیاد سخت نیست)

 

بازم این کدها رو باید کپی ، پست کنین (امان از دست این کدها!!!) توی فایل up-file.php . (مثل index.php)

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>فایل آپلود شد</title>

<link href="style.css" type="text/css" rel="stylesheet"  />

</head>

<body>

 

</body>

</html>

 

مطمئنا همتون میدونید که توی php بخشی هست به اسم متغیرها.

متغیر رو با $ تعریف میکنن.

 

ما میخوایم با استفاده از متغیرها از نوشتن اضافی یه سری کدها جلوگیری کنیم.(یعنی برای هر کد یه متغیر تعریف میکنیم. بعد هر جا به اون کد نیاز داشتم از متغیر استفاده میکنیم. (جلوتر باهاش آشنا میشیم.)

 

دقت کنین که کدهای php باید بین <?php   ?> قرار بگیرن.

اول از همه یه متغیر میسازیم با اسم : $file_error  (این اسم دلخواه هستش. البته نام انتخابی باید طبق قوانین نام گذاری متغیر باشه. یعنی یه سری محدودیت هایی داره. اگه نمیدونین بهتره یه جستجوی بکنید.)

بریم متغیرمون رو بسازیم:

$file_error = $_FILES["file"]["error"];

اون کدی که جلوی متغیر (بعد از مساوی) نوشتم ، یکی از همون کدهایی که نمیخوام دوباره بنویسمش :دی  بجاش از متغیر استفاده میکنم.

با استفاده از $_FILES میتونیم فایل هامون رو از کامپیوتر به روی سرور آپلود کنیم.

اما کدی که مقابل متغیر نوشته شده چیه ؟  این کد خطا ها رو بررسی میکنه

به چه دردی میخوره ؟ اینو بعدا داخل یه شرط قرار میدیم ، اونجا کد کامل میشه . بطور کامل هم همونجا توضیح دادم.

بریم یه متغیر دیگه بسازیم :

$file_name = $_FILES["file"]["name"];

اسم این متغیر رو گذاشتم $file_name . کد مقابلش هم نام فایل آپلود شده رو دریافت میکنه.

یه متغیر دیگه :

$file_type = $_FILES["file"]["type"];

اینم نوع فایل آپلود شده رو مشخص میکنه. (مثلا میگه نوع فایل عکس هستش با فرمت jpg)

 

بازم یه متغیر دیگه (این دیگه آخریشه ، قول میدم!!)

$file_size = ($_FILES["file"]["size"] /1024);

واضح که کد مقابل حجم رو مشخص میکنه. اما بر حسب بایت. حالا ما اومدیم تقسیم 1024 کردیم که به ما حجم رو بر حسب کیلوبایت بده.

کد هایی که تا اینجا نوشتم:

<?php

$file_error = $_FILES["file"]["error"];

$file_name = $_FILES["file"]["name"];

$file_type = $_FILES["file"]["type"];

$file_size = ($_FILES["file"]["size"] /1024);

 

حالا میخوایم یه دستور شرطی ایجاد کنیم و بهش بگیم که اگه فرمت فایل آپلود شده .jpg ، .png و... بود فایل آپلود بشه. در غیر اینصورت بگه : "فایل پشتیبانی نشد".

شکل کلی کدها شرطی اینطوری :

If( شرط مورد نظر )

{

                ادامه کد

}

Else

{

                در غیر اینصورت ...

{

و اما کد اصلیمون :

if ((($_FILES["file"]["type"] == "image/gif")

|| ($_FILES["file"]["type"] == "image/jpeg")

|| ($_FILES["file"]["type"] == "image/pjpeg")

|| ($_FILES["file"]["type"] == "image/png")))

  {

 (طرف دیگه شرط این کد سطر آخر php نوشته میشه . اونجا میگیم که اگه فرمت ها این نبود . یه پیغام نمایش داده بشه و بگه که : "فایل پشتیبانی نشد" )( وقتی اونجا رسیدین میفهمین، چطوری).

الان باید یه دستور شرط if بنویسیم که بررسی کنه ببینه خطایی وجود داره یا نه (به قول گفتنی ببینه موشکیلی هست یا نه. اگه موشکیلی داشت خطا رو نشون بده. :دی) . (این همون شرطی هست که در بخش توضیحات متغییر $file_error  راجعش گفته بودم)

if ($file_error >0)

            {

                        echo "خطا : " . $file_error . "<br />";

            }

کد بالا میگه که : اگه تعداد خطاهامون بیشتر از 0 بود (کلا یعنی اگه خطایی وجود داشت) . خطا رو نشون بده.

حالا بعد از دستور if باید یه شرط دیگه هم بزاریم که بگه اگه if  برقرار نبود، (ادامه کد). این کار رو با else انجام میدیم.

else

            {

            echo "<table id=\"table\" border=\"1px\"><tr><td> نام فایل:</td>" ."<td>". $file_name ."</td></tr>" ."<br />";

            echo "<tr><td> نوع فایل: </td>"."<td>" . $file_type ."</td></tr>". "<br />";

            echo "<tr><td>حجم: </td>"."<td>" . (int)$file_size . "کیلوبایت" ."</td></tr>". "</table><br />";

(این کد ها رو کمی پایین تر بعداز یه سری مقدمات بررسی میکنیم.)

شاید این کدی که نوشتم در نگاه اول یه کم گیج کننده باشه. اما در باطن اینطوری نیست(موجود بی آزاری هست!!)

نکته مهمی که هست اینه که باید بدونین برای اینکه دابل کوتشین های(") php با html قاطی نشن باید چیکار کرد. جوابش خیلی راحته ، فقط باید قبل از دابل کوتشین html از \  استفاده کرد.

مثلا وقتی توی html مینوشتیم :

<table id=”table” border=”1px”>

الان باید توی php این شکلی بنویسیم:

echo "<table id=\"table\" border=\"1px\">

دیدین چه قدر آسون بود.!!!!

راستی توی php  برای اینکه دو رشته رو به هم متصل کنن از . (نقطه) استفاده میکنن.

حالا بریم کدها رو بررسی کنیم:

ساده شده ی کد قبلی این هستش : (کد های html رو برای راحتی حذف کردم. اونایی که از اون کد سر در میارن از اون استفاده کنن . تنبلی هم نکنین)

else

  {

echo "نام فایل:”.  $file_name ."<br />";

echo " نوع فایل: " . $file_type . "<br />";

echo " حجم: " . (int)$file_size . "کیلوبایت" . "<br />";

 اون ((int که توی بخش حجم میبینین واسه حذف کردن بخش اعشار حجم هست. (واسه قشنگی اضافش کردم!!!. میتونین حذفش کنین. بعد از حذف میبینین که اعداد با اعشار (به چه درازی!! البته دقیق) نمایش داده میشن)

الان که به اینجا رسیدیم فکر کنم قدر متغیر ها رو دونسته باشین. چون اگه متغیرها نبودن شما باید اون کدها رو مینوشتین. (حالا جلوتر بازم از همین متغیرها استفاده میکنیم).

 

در ادامه else باید به شرطی بزاریم که بگه اگه فایلی با چنین اسمی قبلا آپلود شده و در فولدر وجود داشت (یعنی اسمشون تکراری بود) یه پیغام بده و بگه که : "یه فایلی با این نام موجود هست"

if (file_exists("upload/" . $file_name))

{

echo $file_name . " فایلی با این نام موجود است. " . "<br />";

}

اگه نبود فایل آپلود شده رو منتقل کنه به پوشه ای که ما مشخص میکنیم. (اینم که معلومه با else نوشته میشه)

else

{

move_uploaded_file($_FILES["file"]["tmp_name"],

"upload/" . $file_name);

echo "ذخیره شده در آدرس:" . "upload/" . $file_name . "<br />";

}

پوشه upload  یه پوشه دلخواه هستش . یعنی هر اسمی میتونین بزارین . مثل hamed ,….

 

الان باید به دستورات شرطی مون خاتمه بدیم و php  ببندیم:

}

}

else

  {

  echo "فایل پشتیبانی نشد";

  }

?>

این else همون قسمت دیگه شرط اول هست که توی اولین شرط درموردش گفته بودم. که اگه فایل ها رو پشتیبانی نکرد ، نشون بده : "پشتیبانی نشد.." .

حالا میخوایم بریم سراغ html و یه کاری کنیم که عکس آپلود شده مون نشون داده بشه.

همچنین آدرس مکان آپلود شده هم نشون بده.

به راحتی با استفاده از تگهای img و input این کار رو انجام میدیم. فقط باید یادتون باشه که چون php رو در قسمت بالا بستیم الان ، دوباره باید باز و بسته کنیم.

<img width="200" height="200" src="upload/<?php echo $file_name ?>" /> <br /><br />

<label>آدرس عکس: </label>

<input size="40" value="http://localhost/upload/<?php echo $file_name ?>"  />

Upload همون پوشه ی دلخواهی بود که ساخته بودیم.

بجای http://localhost/ هم آدرس رو وارد کنید. (اگه روی لوکال هاست دارین تست میکنین که لازم نیست عوض کنین. اگه روی هاست دارین تست میکنین ، آدرس سایتتون رو وارد کنید.)

 

خب همین جا آموزشمون به پایان رسید. امیدوارم که خوشتون اومده باشه و زیاد خسته نشده باشین.

فایل استایل رو هم توضیح ندادم چون یه کار سلیقه ای هست.  و همچنین آموزشی طولانی تر میشد.

اما کل فایل رو براتون ضمیمه کردم.که استایل هم توش موجوده.)

 

 

لینک دانلود

 

 

آموزش اضافه کردن امکان تغییر نام فایل (جهت جلوگیری از تکراری شدن نام) را در اینجا مشاهده کنید.(قسمت جدید آموزش)

موافقین ۲ مخالفین ۰ ۹۱/۱۰/۲۵
حامد رستمی

نظرات (۴)

سلام دوست من ، وقت بخیر .

سوالی برام پیش اومده در همین مورد .
چطور میشه کاری کرد که اسم فایل رو تغییر بده و یا اینکه یه متن کوتاهی رو به صورت رندوم به اسم فایل اضافه کنه ؟
بخاطر اینکه اگر فایل همنام داشته باشم ، دومی جایگزین اولی میشه !

ممنون میشم راهنماییم کنید .
پاسخ:
سلام
موقتا به جای نام گذاری پوشه آپلود از کد زیر استفاده کنید:
 <?php
$random= rand(1,999);
echo "$random";

?>

در سری بعدی این آموزش قصد داریم آموزش اضافه کردن یه سری امکانات جدید رو بدیم. که تغییر نام فایل به نام دلخواه و انتخاب پوشه راندم نمونه ای از این امکانات هستن.

سلام مجدد و تشکر بابت راهنماییتون :)

رندوم بودن فایل مد نظرم بود که فرمودید در آموزشهای بعدی معرفی میکنید .
بازم متشکرم بابت آموزش های مفیدتون .
پاسخ:
خواهش میکنم
سلام و خسته نباشید
مرسی از مطلب ساده ولی پر کاربردتون

میخواستم خواهش کنم دو نوع آموزش به این اسکریپت اضافه کنید

1- بعد از آپلود عکس یک تگ به صورت عکس یا نوشته (مثلا آدرس سایت منبع) بر روی هر عکسی که آپلود میشه قرار بگیره برای / کپی رایت /

2- یک محدودیت قرار دادید به نام محدودیت آپلود عکس .. اگر امکان داره یه کدی تعریف کنید که عکس هارو با هر حجمی که زیاد هست به حجم پایین تبدیل کنه (مانند فیسبوک که بعد آپلود عکس 1 مگ اونو به 300 کیلوبایت تغییر میده)

اگر کمکم کنید برای این کار ممنون میشم .. چون فقط شما بودید که این آموزشه کاملو زیبا همراه با نیاز های دیگران تهیه کردید

سپاسگزارم

۱۶ ارديبهشت ۹۲ ، ۱۳:۵۵ علیرضا دادرس
سلام ممنون از توضیح دقیق تون.

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی