آپلود فایل با Ajax jQuery (ایجکس) همراه با نوار درصد پیشرفت

به صورت معمولی برای آپلود یک فایل به سرور از یک فرم استفاده میکنیم که شناسه enctype فرم ما form-data/multipart هست که مشخص میکند فرم ما قرار است اطلاعات فایل را جابجا کند.

در این جالت یک input از نوع file هم قرار می دهیم که فایل را از سیستم انتخاب می کنیم و پس از زدن دکمه ارسال ، آن فایل به سمت سرور میرود و در بک اند با توجه به زبان برنامه نویسی که php یا asp یا هر چیز دیگه ای باشد فایل را در سرور قرار میدهیم که در این آموزش ما قصد بررسی بک اند نداریم.

در روش جدید و نوین برای آپلود فایل از jQuery و امکان Ajax (ایجکس یا اجکس) استفاده میشود که درصد پیشرفت فایل در حال آپلود را میتوان به صورت زنده مشاهده کرد و پس از اتمام آپلود نیز صفحه رفرش نمیشود و بر اساس خروجی که از سمت بک اند میفرستیم میتوانیم پیامی به کاربر نشان دهیم و تمام.

در مثال زیر توجه کنید که کتابخانه jQuery را حتما در ابتدا به پروژه خود اضافه کرده باشید.

لینک زیر کدهای html و javascript این مثال است که میتوانید در پروژه خود استفاده کنید.

https://codepen.io/zhupin/pen/QWzWjLP

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