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

آموزش آپلود فایل به صورت ایجکسی با استفاده از XMLHttprequest

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

دانلود “سورس آپلود ایجکسی” ajaxupload.zip – Downloaded 32 times – 1 KB

برای شروع ابتدا در پوشه ی htdocs زمپ یا www در ومپ یک فولدر به نام ajaxupload میسازیم .

1

 

خوب ما الان پوشه ی کارمون رو ساختیم ، توی این پوشه به ۲ فایل index.php و upload.php نیاز داریم .

upload.php : در این فایل قراره اسکریپت آپلود فایل رو قرار بدیم ( کد های php آپلود فایل ) البته توی این جلسه روی امنیت آپلود و متد های آپلود فایل کار نمیکنیم و تمرکزمون روی بخش کلاینت ساید هست .

index.php : در این فایل قرار است کد های تحت کاربر خودمون و کد های جاوااسکریپت آپلود ایجکسی رو قرار بدیم .

توجه کنید که در حالت عادی در لوکال هاست ها محدودیت حجم آپلود فایل وجود دارد که ما اون رو با یک کد htaccess به مقدار مدنظرمون تغییر میدیم .

خوب یک فایل .htaccess میسازیم و کد زیر رو در آن قرار میدهیم .

 

الان حداکثر مقدار فایلی که میتونیم آپلود کنیم ۳۰مگ میباشد . ( این مقدار رو با تغییر مقادیر htaccess میتونید تغییر بدهید)

انتخاب فایل به صورت درگ و دراپ

ما برای این کار از درگ و دراگ html5 استفاده میکنیم . خوب اول یک div میسازیم که عرض و ارتفاع ۹۰% داشته باشد تا حالتی مانند گالری وردپرس پیدا کند .

 

استایل :

باید توجه کنیم که هنگانی که فایل در این div رها میشود مرورگر اون رو به عنوان یک پرونده جدید میشناسد و آن را باز خواهد کرد برای جلوگیری از این اتفاق از preventDefault(); در ایونت استفاده میکنیم . ایونت ما برای رها شدن فایل ondrop هست پس یک تابع به عنوان Drop(); هم باید بسازیم که هم شروع آپلود در آن انجام شود و هم جلوگیری از انجام پیشفرض های مرورگر . پس تابع Drop(); ما به شکل زیر خواهد بود :

حالا باید یک حالتی هم تعریف کنیم که هنگامی که موس به اصطلاح روی این div ما هاور شد ( و فایلی در دست داشت ) رنگ پس زمینه div ما تغییر کنید . برای همین باید از دو ایونت ondragover و ondragleave استفاده کنیم .

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

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

اما اگر رها کنیم ، فایل چه میشود !!

api فایل ها در Html5

زمانی که شما فایل را روی div مد نظر رها میکنید HTML5 به آن فایل را نسبت میدهد . خوب حالا ما فایل رو میدانیم داریم ، چطور فراخانی کنیم ؟

برای این کار باید از کد زیر استفاده کنیم .

چون در بعضی از مرورگر ها فایل ها با e.target.files و در بعضی با e.dataTransfer.files فراخوانی میشوند ، ما با ی%A

بر چسب های پست : , , , , , ,
مطالب مرتبط
سلام دوستان امیدوارم حالتون خوب باشد . در این مقاله قراره یک رابط کاربری را استف ...
۰۹ مهر ۹۴
0 دیدگاه
ورود به حساب کاربری
بستن این پنجره