راهنمای ساخت Ajax Upload Progress bar با Javascript, PHP و CGI PERL

[ODE112]

این راهنما فقط برای برنامه نویسایی هست که اطلاعات کافی در مورد کدهای پی اچ پی و اجاکس و پرل دارن!


حتما تا حالا سایتای باکلاس کم ندید که قسمت آپلود فایلشون بهتون بگه چند درصد از فایل آپلود شده و سرعت آپلودتون چقدر هست! اما چطوری میشه فهمید چند درصد از فایل ما آپلود شده؟

خب ما یه مقدار تو PHP داریم که بهمون سایز فایل رو تو شاخه تمپ میده! ولی خب رو هیچ سروری فعال نیست و فقط روی VPS ِیا Dedicate میتونید ازش استفاده کنید!
با این مقدار میشه یه اپلود پروسز بار بی دردسر ساخت!

ولی اونایی که سرور اشتراکی دارن! یا یه سایت ظریف دارن که یه آپلود ظریف هم میخواد مثلا برای اپلود اواتور که رو سرور اشتراکی هستن و هاست کوچیک موچیک دارن باید با Cgi آپلودشونو بسازن!

نمونه آنلاین

http://airyana.com/aliupload_sample/sample_upload_form.html

حالا روش کار چطوری هست!

وقتی شما یه کد میزنید که باهاش یه فایل رو کاربر آپلود کنه!
مثلا وقتی کاربر میزنه یه فایل 60 میگی آپلود بشه!
php اول میاد یه فایل به اسم اتفاقی مثلا TMP4564254 میسازه تو شاخه TMP که سایزش 0 بایت هست!
بعد خرده خرده که محتویات فایل رو از فرم HTML دریافت میکنه اونا رو میریزه توی این فایل!
سایز این فایل ذره ذره میره بالا! مثلا میشه 3 مگ! 4 مگ! 5 مگ... تا وقتی بشه 60 مگ!
وقتی شد 60 مگ از اینجا پاک میشه و میره به فلدره upload که شما تعیین کردید...

حالا چطوری میشه اسم اون فایل در حال آپلود رو حدس زد وسایزشو گرفت؟
با PHP که نمیشه!
اگه میخواید سایز اون فایل رو پیدا کنید همین الان بیخیال PHP بشید!

با CGI میشه اسم اون فایل رو حدس زد ولی چطوری؟
قدم اول این هست که دایرکتوری TEMP CGI رو از حال دیفالتش خارج کردو دایرکتوری خدمون رو بهش بدیم!
وقتی دایرکتوری TMP رو برای CGI عوض کردیم! اونوقت یه قدم به فایل مورد نظرمون نزدیک تر شدیم!

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

بقیشو بعدا میگم که چطوری شاخه tmp رو عوض کنید!

 

[hmsn]

آقا واقعا ايول
دس خوش

 

[hba]

علي خيلي عالي مرسي


من از uber upload استفاده مي كنم همين javascript - php - perl هست خيلي اون هم خوبه
امكان چند اپلود+ زمان سپري شده + زمان مانده + حجم كل + حجم مقدار آلود شده + سرعت واقعي اپلود به سرور رو نشون ميده
من راضي هستم ازش خيلي هم خوب ميبشه تغييرات روش داد

اين هم خيلي خوشگله مرسي


راستي كد نمي دي ؟ :d

 

[ODE112]

علي خيلي عالي مرسي


من از uber upload استفاده مي كنم همين javascript - php - perl هست خيلي اون هم خوبه
امكان چند اپلود+ زمان سپري شده + زمان مانده + حجم كل + حجم مقدار آلود شده + سرعت واقعي اپلود به سرور رو نشون ميده
من راضي هستم ازش خيلي هم خوب ميبشه تغييرات روش داد

اين هم خيلي خوشگله مرسي


راستي كد نمي دي ؟ :d

آقا واقعا ايول
دس خوش

روش کار همشون یکی هست! جنریت کردن یه شناسه اتفاقی و فرستادن اون به فایل CGI و همون تغییر دادن فلدره CGI:TMP هست به شناسه پروسه اپلودی که در جریانه!

ID اتفاقی رو با Javascript میسازیم و اونو همراه با اطلاعات فرم آپلود به سمت سرور فایل CGI میفرستیم!

این id رو میشه با GET یا POST فرستاد که ارسال اون با GET ساده تر هست دریافتش!

اگه بذاریم توی hidden filed رو بفرستیم باید با STDIN دریافتش کنیم که سخت تر هست!

برا همین با GET میفرستیم به این شکل:

http://leo.com/ajax_upload/upload.cgi?upload_id=524551453486415845

حالا باید id رو در فایل CGI دریافت کنیم!

ما تو PHP یه مقداری رو که با url فرستادیم رو به این شکل دریافت میکنیم:

$_GET['id']

یا

$_REQUEST['id']

تو CGI با استفاده میشه از ماژوله CGI میشه راحت این مقدار رو دریافت کرد به این شکل:

my $NCG = new CGI; 

$NCG->param('id');

ولی ما نمیتونیم از این روش برای دریافت upload id مون استفاده کنیم!

برا چی؟

برا اینکه ما میخوایم CGI TEMP DIRECTORY رو قبل از اینکه از new CGI استفاده کرده باشیم! تغییر داده باشیم! وگرنه فلدره تمپ تغییر نمیکنه!

پس باید آیدی قبل از استفاده از ماژول CGI دریافت کرده باشیم!

تو PHP وقتی میخوایم ip کاربر رو بگیریم مثلا از

$_SERVER['REMOTE_ADDR']

استفاده میکنیم!

در CGI از

$ENV{'REMOTE_ADDR'}

یه مقدار دیگه هم مثه این داریم به اسم

$ENV{QUERY_STRING}

که کل QUERY STRING هایی که با URL فرستادیم رو نشون میده!

وقتی ما فقط یه مقدار فرستاده باشیم! پس اولین مقدار برابر همون id= هست که رو اکشن فرم اپلودمون ست کرده بودیم!

پس مقدار id میشه

(split(/[&=]/,$ENV{QUERY_STRING}))[1];

خب تا اینجا UPLOAD ID رو دریافت کردیم!

حالا وقت تغییر دادن دایرکتوری TEMP آپلوده CGI هست!

[B]$CGITempFile::TMPDIRECTORY = OUR_SPECIFIC_DIRECTORY; [/B]

به همین راحتی...

 

[ODE112]

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

وقتی شما یه فرم Multiple Upload درست میکنید که با CGI فایل ها رو اپلود کنید!

مثلا وقتی کاربر 3 تا فایل همزمان از روی کامپیوترش انتخاب میکنه و میخواد آپلودشون کنه که اولی حجمش 1 مگ هست! دومی 3 مگ! و سومی هم 7 مگ هست!

تو فایل CGI با این مقدار میتونیم جم سایز هر 3 فایل رو یکجا بگیریم:

$ENV{'CONTENT_LENGTH'}

الان مقدار $ENV{'CONTENT_LENGTH'} مساوی میشه با 1+3+7 مگابایت به بایت

ینی

11 * 1024 * 1024

حالا اگه شما دوست نداشته باشید که کسی بتونه بیشتر 8 مگابایت روی سایتتون با هر آپلود بفرسته اینطوری آپلود رو متوقف میکنید:

if($ENV{'CONTENT_LENGTH'} > (1024*1024*8))
{
print FILE "OVERMAXALLOW";
exit;
}

حالا تا اینجای کار ما دایرکتوری تمپ رو تغییر دادیم!

حالا باید یه درخواست AJAX ست کنیم که هر یک ثانیه یکبار یا کمتر بیاد و اندازه فایل در حال آپلود رو بخونه و به ما بگه!

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

filesize(OUR_TEMP_DIRECTORY/upload_id)

اولین فایل تو این شاخه رو پیدا میکنیم و سایزشو میگیرم!


ولی این کافی نیست!

ما باید بدونیم مقدار X از چه مقدار آپلود شده!

مثلا 200 بایت از چند بایت آپلود شده!

برای اینکار هم ما در لحظه آپلود در فایل CGI سایز کل آپلود رو تو یه فایل دیگه همون لحظه ذخیره میکنیم!

مثلا سایز کل آپلود رو در فایلی بنام AUP_AGENT ذخیره میکنیم!

در CGI برای ساختن فایل جدید از این دستور استفاده میکنیم:

open FILE,">", "SPECIFIC_DIRECTORY/AUP_AGENT";

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

print FILE $ENV{'CONTENT_LENGTH'};

و فایلو میبندیم:

close FILE;

پرمیشن رو هم براش میذاریم روی 777:

my $mode = 0777; chmod $mode,"SPECIFIC_DIRECTORY/AUP_AGENT";

حالا با یه فایل + دونستن upload id + دونستن مقداره آپلود شده + کل سایز فایل هایی که قرار هست آپلود بشه! درصد آپلود رو بدست میاریم!

 

[Par30dl]

فکر کنم دوستانی که حال یاد گیری ندارن از این استفاده کنن بهتره
http://uber-uploader.sourceforge.net

 

[Amin eHelp]

شما اگر تاپیک زیرخاکی رو بالا نمی آوردید بهتر بود!

 

[aydin55]

سلام وقت بخير
آقا من اينو از http://uber-uploader.sourceforge.net داو نلود كردم چطوري مي تونم در جملا يا مامبو از اين استفاده كنم
با تشكر

 

[ODE112]

سلام وقت بخير
آقا من اينو از http://uber-uploader.sourceforge.net داو نلود كردم چطوري مي تونم در جملا يا مامبو از اين استفاده كنم
با تشكر

این با Perl فایلو آپلود میکنه!
آقا آپلود فایل با Perl دیگه منسوخ شده! اشتباهه! پدره سرور رو در میاره! الان با فلش میشه راحت upload progress bar درست کرد! دنبالش نرید دیکه!

 

[aydin55]

سلام
آقا درست اين پست زير خاكي شده اما من به اين آپلودر نياز دارم .تو رو خدا اگه كسي بلده اينو واسم ياد بده يا حتي اين اروري كه توش گير كردم رو برام بگه ممنون مي شم هزينه هم مي دم.
پروگرس بار موقع آپلود نشون نمي ده.فايل آپلود مي شه اما پروگرس بار نشون نمي ده.

 

[ati88web]

علي خيلي عالي مرسي


من از uber upload استفاده مي كنم همين javascript - php - perl هست خيلي اون هم خوبه
امكان چند اپلود+ زمان سپري شده + زمان مانده + حجم كل + حجم مقدار آلود شده + سرعت واقعي اپلود به سرور رو نشون ميده
من راضي هستم ازش خيلي هم خوب ميبشه تغييرات روش داد

اين هم خيلي خوشگله مرسي


راستي كد نمي دي ؟ :d

دوست عزیر شما خودتون کد میشه بدیییین؟