جمعه , شهریور ۲۹ ۱۳۹۸
خانه / آموزش برنامه نویسی / آموزش برنامه نویسی وب / آموزش Asp.net core / آپلود فایل با استفاده از Ajax در Asp

آپلود فایل با استفاده از Ajax در Asp

آپلود فایل با استفاده از Ajax در Asp

 

با یکی دیگر از مقالات آموزش برنامه نویسی Asp.net mvc و Asp.net core از وب سایت Aspcore.ir در خدمت شما هستم. یکی از مواردی که اکثر برنامه نویسان وب در همان اوایل کار برنامه نویسی با آن روبرو می شوند بحث آپلود فایل با استفاده از Ajax در Asp می باشد. به همین خاطر در این پست به صورت کاملا کاربردی و به همراه ذکر یک مثال این کار را از ابتدا بررسی خواهیم کرد.

ما این مثال را در Asp.net Core 2 انجام خواهیم داد که البته تفاوتی با Asp.net Mvc نیز ندارد.

در ابتدا یک پروژه جدید را از نوع Asp.net core 2 ایجاد می کنیم.

 

آپلود فایل روی هاست در asp

 

همانطور که در تصویر مشاهده می نمایید نام پروژه را AspCoreFileUpload قرار داده ایم و در ادامه پروژه را از نوع Asp.net Core 2 انتخاب می کنیم. در کنترلر HomeController یک Action به نام Index داریم و در بخش View ها نیز یک View به نام Index .

حال می خواهیم در این ویو یک fileUploader ساده ایجاد کنیم.

 

آپلود فایل با استفاده از Ajax در Asp

 

در ویوی Index دستورات زیر را مطابق شکل بنویسید :

 

آموزش اپلود فایل در asp.net mvc

 

با اجرای برنامه خروجی زیر رو مشاهده می فرمایید. یک input با type برابر با file داریم که با کلیک کردن روی آن پنجره انتخاب فایل باز می شود و می توانید فایل را انتخاب کنید. پس از ان با کلیک کردن روی دکمه آپلود فایل به صورت ایجکسی باید فایل آپلود شود.

 

آپلود فایل به صورت ajax در asp

 

خب تا اینجا مقدمات آپلود فایل با استفاده از Ajax در Asp مهیا می باشد. حال باید با استفاده از دستورات جی کوئری و ایجکس کاری کنیم که وقتی روی دکمه آپلود فایل کلیک شد فایل انتخاب شده در یک مسیر از پیش تایین شده درون سرور بارگذاری شود.

به همین منظور در ابتدا در root سرور و در پوشه wwwroot یک فولدر به نام upload را ایجاد می کنیم.

 

آموزش آپلود عکس در asp.net mvc

 

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

 

اموزش آپلود فایل در asp core

 

همانگونه که مشاهده می نمایید در تگ input با type برابر با button یک رویداد OnClick به نام UploadFile تعریف کرده ایم که در ادامه و در قسمت script نیز این تابع را تعریف کرده ایم.

آپلود فایل با استفاده از Ajax در Asp

در این تابع با استفاده از Formdata که جهت آپلود فایل در جی کوئری استفاده می شود فایل را انتخاب کرده و با استفاده از دستورات Ajax به سمت کنترلر home و اکشن UploadFile ارسال کرده ایم.

حال باید در کنترلر Home اکشن UploadFile را ایجاد کنیم و عملیات آپلود را در سمت سرور انجام دهیم.

 

upload file in asp.net mvc

 

همانطور که مشاهده می نمایید در متد Uploadfile از اینترفیس IFormFile استفاده شده است. توسط این کلاس می توان تشخیص داد که از سمت کلاینت فایلی به سمت سرور ارسال شده است و بایستی در اینجا دریافت شود. همچنین در قسمت بالای کنترلر نیز از اینترفیس IHostingEnvironment استفاده شده است که توسط این اینترفیس می توان به روت سایت دسترسی داشت و با آن کار کرد. حال اگر پروژه را اجرا نمایید و فایلی را انتخاب کنید و روی دکمه آپلود فایل کلیک کنید بایستی به صورت ایجکسی فایل شما در مسیر مشخص شده در سرور آپلود شود.

 

دانلود سورس آموزش

 

ما را در تلگرام دنبال کنید

 

آپلود فایل با استفاده از Ajax در Asp

 

یک دیدگاه

  1. سلام استاد ببخشید میشه یه آموزش جهت نحوه ساخت دانلود در asp بسازید؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code