ساخت آپلودر فایل

نویسنده : حسن موحد    ۸ نظر

چند سال پیش که در حال اتمام یادگیری برنامه نویسی پی اچ پی بودم به مشکلی برخوردم که حتی فکر هم نمیکردم به راحتی بتوان چنین کاری را انجام داد .

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

ممکن بپرسید مگر میشه کامل پی اچ پی یاد بگیری و نتونی یه آپلودر فایل به این راحتی درست کنی باید در جواب بگوییم بلی تا زمانی که شما دوستان از کتاب های ترجمه شده ایرانی و غیر تکمیل استفاده کنید با همین مشکل رو برو خواهید بوود .

حال بعد از گذشت این چند سال قصد کردم آموزش ساخت یک مدل آجاکس اون براتون بذارم . طبق معمول میریم دنبال آموزش

نکاتی که در این جلسه خواهیم آموخت :

1. ساختار ایجاد  html برای آپلودر
2. توابع php برای upload فایل و آموزش (توضیحات) انها
3. توابع کتابخانه ای جیکوری و استفاده از انها
4. جمع بندی

ساختار html :

باید حد اقل تا همین لحظه نوشته های گوناگونی در مورد ساخت یک اپلودر دیده باشید . هر کدام از آنها نیاز به تگ اچ تی ام ال  اینپوت با نوع فایل دارند  < input type=file /> اما امروز خواهید آموخت که برای این کار و با استفاده از کتابخانه جی کوئری نیازی به ایجاد چنین تگ نیست .

<div id="upload" >Upload File</div>

در بالا دید که ما این تگ اچ تی ام ال ایجاد نمودیم و id آن را برابر با upload قرار دادیم این id دو کاربر برای ما دارد .

1. برای اضافه کردن شیوه نامه های سی اس اس css
2. برای اضافه کردن کد جی کوئری

برای استفاده راحت تر و بهتر از دکمه آپلود بهتر است سی اس اس ( css ) زیر را به فایل مورد نظر اضافه کنیم  .

#upload{
	margin:30px 200px; padding:15px;
	font-weight:bold; font-size:1.3em;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background:#f2f2f2;
	color:#3366cc;
	border:1px solid #ccc;
	width:150px;
	cursor:pointer !important;
	-moz-border-radius:5px; -webkit-border-radius:5px;
}

فکر نکنم نیازی به توضیحات در مورد این قسمت ها باشه . اگر نیازی هم بوود در قسمت نظرات مطرح بشه جوابتون میدهم .

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

<!-- Upload Button-->
<div id="upload" >Upload File</div><span id="status" ></span>
<!--List Files-->
<ul id="files" ></ul>

ساختار php :

برای ایجاد یک آپلدر واقعی ما نیازمند برنامه نویسی تحت سرور هستیم ، در نتیجه برای این کار از زبان برنامه نویسی پی اچ پی استفاده میکنیم و به آن دستور میدهیم اگر با موفقیت فایل آپلود شد پیام  ( success ) و اگر آپلود نشد یا مشکلی پیش آمد پیام ( error ) بدهد .

<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
  echo "success";
} else {
	echo "error";
}
?>

با یک پیش آگهی قبلی بقیه آموزش پیش میگیریم

• در خط ۲ متغییری معرفی شده که که مقدار آن را دایرکتوری فایلی که باید در آنجا ریخته شود قرار داده شده است .
• در خط ۳ به متغییر دیگر اشاره میشود که در آن شاخه فایلی که باید به آن ریخته شود و نام فایل وجود دارد . وجود تابع basename باعث می‌شود که ورودی فقط نام یک فایل باشد و نتوان آنرا به صورت آدرس یا مسیر یک پوشه وارد کرد .
• در خط ۵ میگوید اگر تابع اجرایی انتقال فایل درست عمل کرد اخطار موفقیت و اگر غیر از این بوود اشکال را گزارش کن .

بهتر است کد نوشته شده بالا را با فایل با این نام  upload-file.php ذخیره نمایید .

ساختار jqury ، javascript :

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

1. تابع اول که وظیفه بازنمودن ارسال شونده فایل و ارسال آن را از کلاینت به سرور دارد.
2. تابع دوم که وظیفه نشان دادن فایل آپلود شده را در قسمت مشخص و همچنین اخطار ها را دارد .

$(function(){
		var btnUpload=$('#upload');
		var status=$('#status');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
					status.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				status.text('Uploading...');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files')
                    .html('<img src="./uploads/'+file+'" alt="" /><br />'+file)
                    .addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});

	});

در نهایت به تشریح این توابع میپردازیم .

• در خط ۱ همان طور که میدانید از این رویه باید برای شروع کتابخانه جیکوئری باید استفاده نمود .
• در خط ۲ یک متغییر ایجاد نموده و مقدار ان را برابر با id که در قسمت تگ html ایجاد نمودیم قرار داده دلیل این کار هم که مشخص چون میخواهد بعدا ها وقتی که این آی دی انتخواب شد توابع جیکوئری فراخوانی کند .
• در خط ۳ متغییری دیگر قرار دارد که وظیفه آن نیز نشان دادن اخطار ها در جای مشخصص است .

نکته : خط های ۲ و  ۳ یک متغییر هستند و بعدها در اسکریپت کاربر دارند .

• در خط ۴ یک کلاس از کتابخانه آجاکس آپلود باز شده که کار ما را برای آپلود راحت تر میکند .
• در خط ۵ نام فایلی که با پی اچ پی ایجاد نمودیم قرار میگیرد .
• در خط ۶ یک نام برای متغییر ارسالی در نظر گرفته میشود .
• در خط ۷ اشاره میکند به زمانی که میخواهد فایل داده و ارسال شود
• در خط ۸ اشاره میکند اگر این فایلها با این فرمت بودند تا خط ۱۰ قبول
• در خط ۱۱ اگر نبودند اشتباه در نظر بگیر
• در خط ۱۳ زمان که طول میکشد برای آپلود فایل این نوشته را نشان بده

تا اینجا onSubmit توضیح داده شد از اینجا به بعد onComplete توضیح داده خواهد شد .

• در خط ۱۵ زمانی که تکمیل شد اجرا کن تابع
• در خط ۱۹ اگر برابر بوود با موفقیت اجرا کن
• در خط ۲۰ تا ۲۲ اشاره میکند که بعد از موفقیت فایل که آپلود شد نشون بده در قسمت مورد نظر
• در خط ۲۳ تا ۲۵ اشاره میکند اگر با موفقیت همراه نبود اشکال را گزارش بده .

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

با تشکر موحد آذر ۱۳۸۹