آپلود فایل به صورت ایجکسی با استفاده از XMLHttprequest
شاید نتوان Ajax را به سادگی توصیف کرد ولی میتوان در یک جمله گفت Ajax ما را قادر میسازد بخشهایی از صفحه را بدون بارگذاری کل صفحه (refresh) به روز رسانی کنیم. مسلماً این قابلیتی است که خیلی ها به دنبال آن هستند زیرا بارگذاری مجدد صفحات وب همواره زمانبر و خسته کننده است ضمن اینکه باعث میشود پهنای باند کاربر نیز بیش از حد مصرف شود.
Ajax تکنیکی برای ایجاد صفحات وب سریع و پویا میباشد. Ajax به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند. به این ترتیب میتوان تنها بخش(هایی) از صفحه را بدون بارگذاری کل صفحه به روز رسانی کرد. در صورتی که صفحات معمولی باید کل صفحه را به منظور تغییر محتوا به روز رسانی کنند.
در این مطلب از سایت قصد داریم به شما آموزش دهیم که چگونه بتوانید در سایتتان قابلیت آپلود فایل بصورت آیجیکس با استفاده از XMLHttprequest اضافه کنید .
ما برای اینکار نیاز به 2 فایل با نام های index.php و upload.php داریم که در این جلسه قصد داریم فقط بخش ClientSide را به شما آموزش دهیم و کاری با امنیت آپلود و متد های آپلود فایل نداریم .
آپلود فایل به صورت ایجکس
گام اول اگر این آموزش را می خواهید در لوکال هاست انجام دهید ، با توجه به محدودیت هایی که وجود دارد یک فایل .htaccess ساخته و کدهای زیر را درون آن قرار دهید . توجه داشته باشید از طریق php.ini نیز میتوانید محدودیت ها را تغییر دهید .
|
1 2 3 |
php_value memory_limit 30M php_value post_max_size 100M php_value upload_max_filesize 30M |
گام دوم برای انتخاب فایل به صورت درگ و دراپ یک div میسازیم که عرض و ارتفاع 90% داشته باشد تا حالتی مانند گالری وردپرس پیدا کند .
|
1 2 |
<div class="input-place" ondrop="Drop()" ondragleave="dragLeave()" ondragover="dragOver()"> </div> |
گام سوم به div که ساختیم با css به آن استایل میدهیم .
|
1 2 3 4 5 6 7 8 9 |
.input-place{ width: 90%; height: 90%; background: white; -webkit-box-shadow: 0px 0px 5px #666; -moz-box-shadow: 0px 0px 5px #666; box-shadow: 0px 0px 5px #666; margin: 2% 5%; } |
گام چهارم باید توجه کنیم هنگانی که فایل در این div رها میشود مرورگر آن را به عنوان یک پرونده جدید میشناسد و آن را باز خواهد کرد ، و برای جلوگیری از این اتفاق از preventDefault(); در ایونت استفاده میکنیم . ایونت ما برای رها شدن فایل ondrop هست ، پس یک تابع به عنوان Drop(); هم باید بسازیم که هم شروع آپلود در آن انجام شود و هم جلوگیری از انجام پیشفرض های مرورگر ، پس تابع Drop(); ما به شکل زیر خواهد بود :
|
1 2 3 |
function Drop(){ e.preventDefault(); } |
گام پنجم حال باید یک حالتی هم تعریف کنیم هنگامی که موس به اصطلاح روی این div ما هاور شد (و فایلی در دست داشت) رنگ پس زمینه div ما تغییر کنید . برای همین باید از دو ایونت ondragover و ondragleave استفاده کنیم .
به دلیل اینکه از این div اصلی خیلی استفاده میکنیم فراخوانی آن را در یک تابع انجام می دهیم :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function getDropzone(){ var div = document.getElementsByClassName("input-place")[0]; return div; } function dragOver(e){ var event = window.event; event.preventDefault(); getDropzone().style.background = "black"; } function dragLeave(){ getDropzone().style.background = "white"; } |
در حال حاضر زمانی که ما فایلی را روی آن div بیاریم مشاهده می کنیم که رنگ پس زمینه سیاه می شود و اگر موس را از آن منطقه خارج کنیم ، پس زمینه سفید میشود .
اما اگر رها کنیم ، فایل چه میشود !!؟ آپلود فایل به صورت ایجکس
API فایل ها در Html5
زمانی که شما فایلی را روی div مد نظر رها می کنید ، HTML5 به آن فایل را نسبت میدهد . حال فایل چطور فراخانی کنیم ؟
برای این کار باید از کد زیر استفاده کنیم :
|
1 2 |
e = window.event; var files = e.target.files || e.dataTransfer.files; |
با توجه به اینکه در بعضی از مرورگرها فایل ها با e.target.files و در بعضی با e.dataTransfer.files فراخوانی میشوند ، در کد بالا از || استفاده کرده ایم و مابین آن از e.target.files و e.dataTransfer.files قرار داده ایم تا تمامی مرورگرها را پشتیبانی کند .
آپلود فایل به صورت ایجکس
برای دریافت نتیجه / سورس پروژه اینجا کلیک کنید .
(3 votes, average: 5,00 out of 5)
Loading...