در این پروژه ی نمونه در محیط ASP.MVC 4 تلاش می کنیم لیستی از فایلها را با کمک Ajax به سرور ارسال کنیم. در مسیر پیاده سازی این پروژه از HTML5 و بخش File API استفاده شده است. متاسفانه این قابلیت در مرورگر IE از نسخه ی 10 به بعد پشتیبانی میشود اما در سایر مرورگرها به خصوص کروم به طور کامل قابل استفاده است.


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

پیاده سازی لیستی از فایلها انتخاب شده به این گونه که کاربر بتواند آنها را کم و زیاد کند و قبل از ارسال از میزان حجم آنها مطلع شود در گذشته ممکن نبود مگر به کمک جاوا یا فلش و برای آنهایی که خیلی ماجراجو هستند سیلورلایت !

برنامه ظاهر ساده ای دارد. یک دکمه که از شما میخواهد تعدادی فایل انتخاب کنید. بلافاصله بعد از انتخاب فایل جدولی از مشخصات آنها ارائه میشود. این جدول پویا است و چنانچه همه ی فایلهای انتخاب شده را حذف کنید محو میشود. به همراه هر فایل یک خاصیت با نام "موضوع" و یک خاصیت با نام "عنوان" به سرور ارسال میشود. بعدا میبینید که کد سمت سرور این خصوصیات را تشخیش میدهد و آنها را به همراه نام فایل در سرور ذخیره می کند.

در هنگام اجرا پروژه مشاهده خواهید کرد که اینترفیس خیلی پویاست و به تغییرات سریع واکنش میدهد. اضافه کردن یک فایل باعث نمایان شدن جدول و مشخصات آن و همچنین دکمه ی ثبت میشود و حذف کردن همه ی آنها جدول و دکمه ی ثبت را پنهان می کند. بهترین روش برای طراحی چنین اینترفیس هایی استفاده از فریم ورک Knockout است. با استفاده از Data-Binding می توانید خیلی از رویدادها را بدون کد نویسی مونیتور کنید و به آنها به سرعت پاسخ دهید.

قابلیت ها

  • انتخاب چند فایل همزمان
  • نمایش فایلها به ترتیب شماره
  • نمایش نام و حجم فایلها
  • قابلیت افزودن موضوع و عنوان
  • قابلیت افزودن و حذف فایل های انتخاب شده
  • نمایش تعداد و مجموع حجم فایلهای انتخاب شده
  • قابلیت حذف همه فایلها
  • پنهان سازی جدول قبل از انتخاب فایل
  • پیغام خالی بودن انتخاب
  • ارسال اطلاعات به سرور با ajax

دانلود فایل پروژه (حجم 2.6 مگابایت )

مطالب مرتبط :

آپلود فایل در با Ajax در ASP.MVC3 – نسخه 3

آموزش آپلود عکس در ASP.MVC با AJAX