آپلود فایل با استفاده از Ajax در Asp
آپلود فایل با استفاده از Ajax در Asp
آپلود فایل با استفاده از Ajax در Asp
با یکی دیگر از مقالات آموزش برنامه نویسی Asp.net mvc و Asp.net core از وب سایت خدمت شما هستم. یکی از مواردی که اکثر برنامه نویسان وب در همان اوایل کار برنامه نویسی با آن روبرو می شوند بحث آپلود فایل با استفاده از Ajax در Asp می باشد. به همین خاطر در این پست به صورت کاملا کاربردی و به همراه ذکر یک مثال این کار را از ابتدا بررسی خواهیم کرد.
ما این مثال را در Asp.net Core 2 انجام خواهیم داد که البته تفاوتی با Asp.net Mvc نیز ندارد.
در ابتدا یک پروژه جدید را از نوع Asp.net core 2 ایجاد می کنیم.
همانطور که در تصویر مشاهده می نمایید نام پروژه را AspCoreFileUpload قرار داده ایم و در ادامه پروژه را از نوع Asp.net Core 2 انتخاب می کنیم. در کنترلر HomeController یک Action به نام Index داریم و در بخش View ها نیز یک View به نام Index . حال می خواهیم در این ویو یک fileUploader ساده ایجاد کنیم.
در ویوی Index دستورات زیر را مطابق شکل بنویسید :
با اجرای برنامه خروجی زیر رو مشاهده می فرمایید. یک input با type برابر با file داریم که با کلیک کردن روی آن پنجره انتخاب فایل باز می شود و می توانید فایل را انتخاب کنید. پس از ان با کلیک کردن روی دکمه آپلود فایل به صورت ایجکسی باید فایل آپلود شود.
خب تا اینجا مقدمات آپلود فایل با استفاده از Ajax در Asp مهیا می باشد. حال باید با استفاده از دستورات جی کوئری و ایجکس کاری کنیم که وقتی روی دکمه آپلود فایل کلیک شد فایل انتخاب شده در یک مسیر از پیش تایین شده درون سرور بارگذاری شود. به همین منظور در ابتدا در root سرور و در پوشه wwwroot یک فولدر به نام upload را ایجاد می کنیم.
حال که مسیر آپلود فایل هم تایین شد کافیست دستورات مورد نیاز را توسط جی کوئری بنویسیم. به تصویر زیر دقت نمایید.
همانگونه که مشاهده می نمایید در تگ input با type برابر با button یک رویداد OnClick به نام UploadFile تعریف کرده ایم که در ادامه و در قسمت script نیز این تابع را تعریف کرده ایم. در این تابع با استفاده از Formdata که جهت آپلود فایل در جی کوئری استفاده می شود فایل را انتخاب کرده و با استفاده از دستورات Ajax به سمت کنترلر home و اکشن UploadFile ارسال کرده ایم. حال باید در کنترلر Home اکشن UploadFile را ایجاد کنیم و عملیات آپلود را در سمت سرور انجام دهیم.
همانطور که مشاهده می نمایید در متد Uploadfile از اینترفیس IFormFile استفاده شده است. توسط این کلاس می توان تشخیص داد که از سمت کلاینت فایلی به سمت سرور ارسال شده است و بایستی در اینجا دریافت شود. همچنین در قسمت بالای کنترلر نیز از اینترفیس IHostingEnvironment استفاده شده است که توسط این اینترفیس می توان به روت سایت دسترسی داشت و با آن کار کرد. حال اگر پروژه را اجرا نمایید و فایلی را انتخاب کنید و روی دکمه آپلود فایل کلیک کنید بایستی به صورت ایجکسی فایل شما در مسیر مشخص شده در سرور آپلود شود.
آپلود فایل با استفاده از Ajax در Asp
