hakim22
سه شنبه 19 شهریور 1392, 21:46 عصر
در محیط وب آپلود کردن فایل به سرور یک چالش جدی است. اگر قرار باشد کاربر چنین فایل را انتخاب کند و به سرور بفرستد روش معمول این است که به صورت تک تک آنها را انتخاب کند و سپس ارسال کند. در این حالت هم جاوا اسکریپت هیچ درکی از فایلهای انتخاب شده و محتویات آنها ندارد. برای نمایش نام و مشخصات فایل باید ابتدا آن را به سرور ارسال کرد و سپس در قالب یک فایل با یک url مشخص به کاربر بازگرداند.
http://s1.picofile.com/file/7931185157/large001.jpg
پیاده سازی لیستی از فایلها انتخاب شده به این گونه که کاربر بتواند آنها را کم و زیاد کند و قبل از ارسال از میزان حجم آنها مطلع شود در گذشته ممکن نبود مگر به کمک جاوا یا فلش و برای آنهایی که خیلی ماجراجو هستند سیلورلایت !
در این پروژه ی نمونه در محیط ASP.MVC 4 تلاش می کنیم لیستی از فایلها را با کمک Ajax به سرور ارسال کنیم. در مسیر پیاده سازی این پروژه از HTML5 و بخش File API استفاده شده است. متاسفانه این قابلیت در مرورگر IE از نسخه ی 10 به بعد پشتیبانی میشود اما در سایر مرورگرها به خصوص کروم به طور کامل قابل استفاده است.
برنامه ظاهر ساده ای دارد. یک دکمه که از شما میخواهد تعدادی فایل انتخاب کنید. بلافاصله بعد از انتخاب فایل جدولی از مشخصات آنها ارائه میشود. این جدول پویا است و چنانچه همه ی فایلهای انتخاب شده را حذف کنید محو میشود. به همراه هر فایل یک خاصیت با نام "موضوع" و یک خاصیت با نام "عنوان" به سرور ارسال میشود. بعدا میبینید که کد سمت سرور این خصوصیات را تشخیش میدهد و آنها را به همراه نام فایل در سرور ذخیره می کند.
در هنگام اجرا پروژه مشاهده خواهید کرد که اینترفیس خیلی پویاست و به تغییرات سریع واکنش میدهد. اضافه کردن یک فایل باعث نمایان شدن جدول و مشخصات آن و همچنین دکمه ی ثبت میشود و حذف کردن همه ی آنها جدول و دکمه ی ثبت را پنهان می کند. بهترین روش برای طراحی چنین اینترفیس هایی استفاده از فریم ورک Knockout است. با استفاده از Data-Binding می توانید خیلی از رویدادها را بدون کد نویسی مونیتور کنید و به آنها به سرعت پاسخ دهید.
امیدوارم پروژه مورد استفاده ی دوستان قرار بگیرد. موفق و پیروز باشید.
دانلود فایل پروژه (http://s1.picofile.com/file/7931182896/FileUpload_Web.rar.html)
قابلیت ها
انتخاب چند فایل همزمان
نمایش فایلها به ترتیب شماره
نمایش نام و حجم فایلها
قابلیت افزودن موضوع و عنوان
قابلیت افزودن و حذف فایل های انتخاب شده
نمایش تعداد و مجموع حجم فایلهای انتخاب شده
قابلیت حذف همه فایلها
پنهان سازی جدول قبل از انتخاب فایل
پیغام خالی بودن انتخاب
ارسال اطلاعات به سرور با ajax
http://s1.picofile.com/file/7931185157/large001.jpg
پیاده سازی لیستی از فایلها انتخاب شده به این گونه که کاربر بتواند آنها را کم و زیاد کند و قبل از ارسال از میزان حجم آنها مطلع شود در گذشته ممکن نبود مگر به کمک جاوا یا فلش و برای آنهایی که خیلی ماجراجو هستند سیلورلایت !
در این پروژه ی نمونه در محیط ASP.MVC 4 تلاش می کنیم لیستی از فایلها را با کمک Ajax به سرور ارسال کنیم. در مسیر پیاده سازی این پروژه از HTML5 و بخش File API استفاده شده است. متاسفانه این قابلیت در مرورگر IE از نسخه ی 10 به بعد پشتیبانی میشود اما در سایر مرورگرها به خصوص کروم به طور کامل قابل استفاده است.
برنامه ظاهر ساده ای دارد. یک دکمه که از شما میخواهد تعدادی فایل انتخاب کنید. بلافاصله بعد از انتخاب فایل جدولی از مشخصات آنها ارائه میشود. این جدول پویا است و چنانچه همه ی فایلهای انتخاب شده را حذف کنید محو میشود. به همراه هر فایل یک خاصیت با نام "موضوع" و یک خاصیت با نام "عنوان" به سرور ارسال میشود. بعدا میبینید که کد سمت سرور این خصوصیات را تشخیش میدهد و آنها را به همراه نام فایل در سرور ذخیره می کند.
در هنگام اجرا پروژه مشاهده خواهید کرد که اینترفیس خیلی پویاست و به تغییرات سریع واکنش میدهد. اضافه کردن یک فایل باعث نمایان شدن جدول و مشخصات آن و همچنین دکمه ی ثبت میشود و حذف کردن همه ی آنها جدول و دکمه ی ثبت را پنهان می کند. بهترین روش برای طراحی چنین اینترفیس هایی استفاده از فریم ورک Knockout است. با استفاده از Data-Binding می توانید خیلی از رویدادها را بدون کد نویسی مونیتور کنید و به آنها به سرعت پاسخ دهید.
امیدوارم پروژه مورد استفاده ی دوستان قرار بگیرد. موفق و پیروز باشید.
دانلود فایل پروژه (http://s1.picofile.com/file/7931182896/FileUpload_Web.rar.html)
قابلیت ها
انتخاب چند فایل همزمان
نمایش فایلها به ترتیب شماره
نمایش نام و حجم فایلها
قابلیت افزودن موضوع و عنوان
قابلیت افزودن و حذف فایل های انتخاب شده
نمایش تعداد و مجموع حجم فایلهای انتخاب شده
قابلیت حذف همه فایلها
پنهان سازی جدول قبل از انتخاب فایل
پیغام خالی بودن انتخاب
ارسال اطلاعات به سرور با ajax