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

در این آموزش سعی میکنیم نحوه ی ساخت فرم آپلود فایل ساده رو به شما آموزش بدیم. برای اینکار ما به دو صفحه احتیاج داریم ،یک صفحه HTML که فرم رو نمایش بدیم و یک صفحه PHP تا اطلاعات فایل ارسالی رو بررسی و عمل آپلود رو انجام بده و اگر خواستید محدودیتی از نظر نوع فایل (فرمت فایل) و یا حجم فایل برای آپلود ایجاد کنید باید در همین صفحه PHP اون رو اعمال کنید که در آموزش های بعدی این محدودیت ها رو برای ساخت فرم آپلود بررسی خواهیم کرد.

مرحله ۱ : صفحه ی  HTML

خوب ما از صفحه HTML شروع می کنیم :


<form enctype="multipart/form-data" action="uploader.php" method="post" >
<input name="MAX_FILE_SIZE" value="100000" type="hidden" />
<label>فایل پیوست را انتخاب نمایید:</label>
<input type="file" name="UploadedFile" />
<input type="submit" value="آپلود" />
</form>


خوب حالا ببینیم این کدهایی که گفتیم چه هستند و چکار میکنند!

همونطور که میدونید برای ایجاد کردن یک فرم از تگ <form> استفاده میکنیم.تگ فرم دارای خصوصیاتی است که بعضیهاش اختیاری هستند و بعضی هاش اجباری. در زیر ما این خصوصیات رو بررسی خواهیم کرد:


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

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


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


مشخصه ی بعدی محل فایل php رو نشون میده ، این فایل php همون صفحه ایست که مشخصات فایل رو بررسی میکنه و فایل آپلودی رو ذخیره میکنه.نام این صفحه در اینجا uploader.php است اگر نام صفحه ی php شما فرق میکنه یادتون باشه در این بخش نام فایل php خودتون رو وارد کنید. شما میتونید از آدرس دهی نسبی و یا مطلق برای مقدار این مشخصه استفاده کنید یعنی :

action=”http://www.YOURSITE.com/uploader.php”

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


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


این مشخصه نحوه ی ارسال اطلاعات رو نشون میده. در کل دو شیوه برای ارسال و دریافت اطلاعات وجود دارند که post و get نامیده میشوند.ما برای فرم های آپلود از متد post استفاده میکنیم.

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


<input name="MAX_FILE_SIZE" value="100000" type="hidden" />


هرچند این روش کافی نیست و مطمئن نیست ولی میتونه مفید باشه. در ادامه راه های بهتری رو هم ذکر خواهیم کرد.

با استفاده از تگ <input> فیلد رو ایجاد میکنیم تا کاربر بتونه فایل رو آپلود کنه :


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


برای اینکه این فیلد برای ارسال فایل مناسب باشه باید مقدار type رو برابر file قرار بدید . همونطور که در سطر بالا میبینید. مشخصه ی name هم مقداری که بهش میدید سلیقه ای هستش که ما در اینجا UploadedFile رو انتخاب کردیم.این مقدار هرچیزی میتونه باشه مثلا اسم شما یا هرچیز دیگه ای ولی باید با حروف شروع بشه و نه با عدد.در صفحه ی بعد با این مقدار (UploadedFile) بیشتر آشنا خواهید شد.

نکته ی دیگه اینکه توجه کنید در اینجا UploadedFile با مقدار uploadedfile متفاوت هست یعنی برزگ و کوچک بودن حروف اهمیت دارند.

تا اینجا صفحه ی html ما کامل شد . میتونید حتی با css فرم آپلود خودتون رو زیبا کنید و بهش شکل و قیافه بدید!

مرحله ی ۲ : صفحه ی PHP

بعد از اینکه کاربر بر روی دکمه ی ” آپلود ” کلیک کنه اطلاعات به سرور فرستاده میشه و توسط صفحه ی PHP پردازش خواهد شد و تمام کارها رو انجام میده. تمام فرآیندها و محدودیت هایی که میتونید اعمال کنید در این صفحه انجام خواهد شد و در نهایت فایل بر روی سرور شما ذخیره میشه.

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

شما فقط مثلا آپلود تصویر رو مجاز کردید ولی کاربر فایلی غیر از تصویر ارسال کرده
حجم فایل ارسالی بیش از حجم مجاز تعیین شده باشه
مشکلی در حین عملیات آپلود رخ بده و …
ما در اینجا فرم ساده ای رو طراحی می کنیم که محدودیتی از نظر اندازه یا نوع فایل نداره ولی به شما توصیه میکنیم حتما از این محدودیت ها استفاده کنید چون همیشه همه نیت خوب ندارند و میتونن برای سایت مشکل ایجاد کنن . (پی نوشت : محدود کردن آپلود به فرمت های خاص)

خوب شروع کنیم:
اجازه بدید اول کد صفحه ی PHP رو باهم ببینیم و بعد در مورد بخش های مختلف اون صحبت کنیم:


<?php
$file_name = $_FILES['UploadedFile']['name'];
$target_path = "uploads/".$file_name;
if(move_uploaded_file($_FILES['UploadedFile']['tmp_name'], $target_path)) {
echo "فایل ". $file_name ." با موفقیت آپلود شد";}
else {
echo "متاسفانه مشکلی در حین عملیات آپلود رخ داد،لطفا مجددا امتحان کنید";}
?>


خوب در ابتدای کد یک متغیر تعریف کردیم ( در PHP متغیرها با علامت $ شروع میشوند) و نام این متغیر رو file_name$ گذاشتیم و نام فایل آپلودی رو که در فرم HTML با برچسب UploadedFile تعیین کرده بودیم در اینجا با استفاده از متغیر سراسری FILES_$ دریافت و  در متغیری که ساختیم کپی میکنیم:


$file_name = $_FILES['UploadedFile']['name'];


خوب مثلا اگر شخصی فایلی که آپلود کرده بود یک تصویر با نام mypic.jpg بوده باشه ، در واقع متغیر file_name$ مقدار mypic.jpg رو در خودش ذخیره میکنه.

در سطر بعد دوباره یک متغیر دیگه ایجاد کردیم و در این متغیر مسیری رو که میخواهیم فایل در اون ذخیره بشه وارد کردیم.


$target_path = "uploads/".$file_name;


در واقع در سطر بالا uploads نام فولدری است که فایل در اون ذخیره میشه و خودتون باید یک پوشه با این نام یا هر نامی که انتخاب کردید در سرور ایجاد کنید. متغیری هم که به دنبال uploads در سطر بالا اومده براتون آشناست و کارش رو میدونید!

حالا که نام فایل و مسیر دخیره سازی رو داریم تنها کاری که باقی مونده اینه که یک دستور شرطی ایجاد کنیم و سر فایل آپلود شده بلایی نازل کنیم!


if ( move_uploaded_file($_FILES['UploadedFile']['tmp_name'], $target_path))


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

با متغیر سراسری FILES_$ قبلا هم آشنا شدیم (جایی که میخواستیم اسم فایل رو دریافت کنیم!) حالا دوباره ازش استفاده میکنیم و این بار نام فایل موقتی رو دریافت میکنیم یعنی tmp_name !

در حقیقت دستور ()move_uploaded_file دو مقدار رو دریافت میکنه که با علامت , از هم جدا میشن ، یکی نام فایل موقت و دومی مسیر ذخیره (که ما در متغیر target_path$ اون رو قرار دادیم).

حالا یک پرانتز بازمیکنیم تا دستور شرط رو تعیین کنیم ، عبارات شرطی درون پرانتز نوشته خواهند شد یعنی :


if (شرط)
{ دستورات }


با دستور echo عبارت رو چاپ میکنیم تا کاربر بتونه ببینه ، با دستور else هم که پیامی رو که در صورت بروز خطای احتمالی رخ بده نمایش میدیم .

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

پی نوشت : این مطلب در تاریخ ۵ دیماه ۱۳۹۰ مورد بازبینی و ویرایش مجدد قرار گرفت.