آپلود فایل با Ajax و درصد پیشرفت قسمت۱

در این مطلب قصد داریم نحوه آپلود با استفاده از ajax زو آموزش بدیم؛ البته از جی کوئری استفاده نکردیم و برای آشنایی بیشتر از جاوااسکریپت خام استفاده کردیم، قسمت بک اند رو هم با php مینویسیم.

کدهای HTML :

برای بخش HTML به فرم ساده برای اپلود فایل ایجاد میکنیم و بخش هایی هم برای نشون دادن مشخصات فایل اپلودی و هم چنین برای قسمت نوار پیشرفت از تگ progress که در HTML5 معرفی شده استفاده کردیم (البته میشه با ترفندی خاص از تگ های دیگه استفاده کرد).

خوب فرم توضیح خاصی نداره فقط برای تگ input فایل یه رویداد change تعریف شده که تابع fileSelected رو اجرا میکنه و اینم برای اینکه مشخصات فایل رو دریافت کنیم . نمایش بدیم.و برای تگ دکمه هم بریا رویداد click تابع uploadFile تعریف شده که وظیفه آپلود کردن فایل رو بر عهده داره.

کدهای جاوا اسکریپت :

اول فایل انتخاب شده در تگ فایل رو دریافت کردیم  و گفتیم اگه فایلی موجود بود اون وقت اندازه فایل (حجم) رو چک کردیم که اندازه رو در واحد مناسب نشون دادیم،بعدش هم در قسمت های مناسب (بخش HTML)اطلاعات فایل رو قرار دادیم.

خوب این تابع مربوط میشه به کلیک کردن روی دکمه upload که در اینجا اول از همه یک شی جدید از FormData که قابلیت ارسال با ای جکس رو داره ساختیم و بعد فایل مربوطه به تگ فایل رو با متد append بهش اضافه کردیم.بعد یک شی جدید از Ajax ساختیم (XmlHttpRequest) این شی دارای خاصیتی به نام upload هست که میتونیم با رویداد progress برای پیشرفتش یه تابع ایجاد کنیم.متد addEventListener تابع مورد نظر رو به رویداد مورد نظر اضافه میکنه.یعنی میگه با انجام شدن این رویداد این تابع اجرا بشه.بعدشم برای رویداد های مختلف این شی توابع مختلفی معرفی کردیم.برای رویداد load که به معنی انجام شدن کار هست تابع uploadcomplete رو تعریف کریدم و برای رویداد خطا uploadfailed و برای رویداد abort هم uploadCancel تعریف شده که به معنی انصراف کاربر هست.

در نهایت هم نوع ارسال اطلاعات و آدرس اطلاعات رو مشخص کردیم و با متد send شی FormData رو ارسال کردیم.

خوب دوستان عزیز در قسمت بعد چند تابع باقی مونده و بخش PHP رو تکمیل میکنیم.


پست های مرتبط