BAU - کامپوننتی برای آپلود واقعی فایل با AJAX

[Behrouz_Rad]

Demo ی این کامپوننت رو در آدرس ذیل قرار دادم:

http://bau.codepro.ir

AJAX، دنیای وب را متحول کرده است. هر روز ابزارها و قابلیت های بیشتری بر مبنای آن معرفی و موجب هر چه کمتر شدن فاصله ی میان برنامه های Web-Based و Desktop-Based می شوند.
متاسفانه AJAX به گونه ای طراحی شده است که فقط امکان ارسال داده های متنی را دارد و نمی توان با آن داده های باینری را منتقل نمود. این نقطه ضعف موجب شده است تا امکان آپلود فایل ها بدون PostBack شدن صفحه میسر نباشد. حتی کنترل AsynsFileUpload در مجموعه ی AJAX Control Toolkit نیز با ایجاد یک Frame اقدام به ارسال فایل به Server می کند.
موتور Gecko نسخه ی 1.9.1 که مرورگر Firefox در نسخه ی 3.5 خودش از آن استفاده می کند، قابلیتی را به کامپوننت XMLHttpRequest که هسته ی اصلی AJAX را تشکیل می دهد اضافه کرد که به موجب آن امکان ارسال داده های باینری نیز فراهم شده است. این قابلیت موجب شد تا به فکر ایجاد کامپوننتی برای ASP.NET بیفتم که امکان آپلود فایل ها را بدون نیاز به PostBack صفحه می دهد. ضمن اینکه میزان درصد آپلود، حجم کل فایل و میزان حجمی که تا زمان جاری آپلود شده است نیز نمایش داده می شود. در این مقاله به طور کامل با این کامپوننت، نحوه ی استفاده و قابلیت های متنوع آن آشنا خواهید شد.

قبل از شروع، بهتر است به دو سوالی که احتمالاً در ذهنتان ایجاد شده است پاسخ دهم.

سوال: فقط Firefox؟
پاسخ: هر مرورگری که از موتور Gecko نسخه ی 1.9.1 استفاده می کند، می تواند از این کامپوننت استفاده کند. برای دیدن لیستی از این مرورگرها به لینک ذیل مراجعه بفرمایید:
http://en.wikipedia.org/wiki/Compari...al_information

سوال: مرورگر Internet Explorer در حال حاضر بیشترین سهم بازار مرورگرها را میان کاربران در اختیار دارد. برای این مرورگر چه فکری شده است؟
پاسخ: متاسفانه قابلیت جدید اضافه شده به کامپوننت XMLHttpRequest در مرورگر Internet Explorer پشتیبانی نمی شود. اما برای این کامپوننت، یک Property با نام IsSupported ایجاد کردم که می توان با بررسی آن، متوجه شد که آیا این کامپوننت توسط مرورگر کاربر پشتیبانی می شود یا خیر. از آنجا که محبوب ترین مرورگری که از موتور Gecko استفاده می کند مرورگر Firefox است، در صورتی که کاربر از مرورگری به جز Firefox 3.5 و بالاتر استفاده می کرد، می توان به شکل معمول اجازه ی آپلود به کاربر را داد: بدین شکل که یک کامپوننت FileUpload و یک Button را در یک Panel با خاصیت Visible در ابتدا برابر با False قرار دهید و در صورتی که مقدار برگشتی خصیصه ی IsSupported برابر با False بود، Panel را به کاربر نشان دهید.

Source این کامپوننت رو بعد از تست نهایی قرار میدم.

با این مقدمه به سراغ این کامپوننت می رویم.
ابتدا نمایی از Demo ی این کامپوننت را ببینیم:

نام این کنترل را BAU گذاشتم. BAU مخفف Behoo Ajax Uploader است.

کنترل BAU در Visual Studio 2008 و با C#‎‎‎‎‎‎‎ نوشته شده و از دو قسمت تشکیل شده است. BAU Handler و Control BAU.
ابتدا در مورد BAU Handler توضیح میدم. BAU Handler یک Http Handler است.
1) فایل BAUHandler.dll رو با Browse از طریق انتخاب گزینه ی Add Reference از منوی Project به پروژه اضافه کنید. (اگر از حالت Web Site برای ایجاد پروژه استفاده کرده اید، گزینه ی Add Reference در منوی Website وجود دارد)
2) فایل Web.Config را باز کرده و سکشن <httpHandlers> را پیدا کنید. قبل از تگ پایان اون، عبارت ذیل رو برای رجیستر کردن Http Handler در پروژه اضافه کنید:

<add verb="POST" path="*.aspx" type="BAUHandler.UploadHandler, BAUHandler"/>

3) BAU Handler حتماً نیاز به 3 مقدار دارد. این مقادیر از فایل Web.Config خوانده میشن و در تگ appSettings قرار می گیرن:

<appSettings>

    <add key="BAU-SaveFolder" value="Uploads"/>

    <add key="BAU-MaxFileSize" value="1024"/>

    <add key="BAU-GenerateUniqueFileName" value="false"/>

</appSettings>

پارامتر BAU-SaveFolder، مسیری رو مشخص می کنه که فایل هایی که آپلود میشن در اون قرار می گیرند. این مسیر نسبت به ریشه ی اصلی سایت سنجیده میشه. در مثال فوق مشخص شده است که فایل های آپلودی باید در پوشه ی Uploads که در ریشه ی اصلی سایت هست قرار بگیرن.
پارامتر BAU-MaxFileSize، حداکثر میزان مجاز اندازه ی فایل آپلودی توسط کاربر رو تعیین می کنه. این مقدار بر حسب کیلو بایت هست. در مثال فوق، حداکثر میزان مجاز اندازه ی فایل، برابر با 1 مگابایت تنظیم شده است.

نکته: در ASP.NET به طور پیش فرض، حجم Request ارسالی به Server برابر با 4096 کیلو بایت است. در صورتی که مقدار پارامتر BAU-MaxFileSize را به مقداری بیش از 4096 تنظیم می کنید، باید مقدار خصیصه ی maxRequestLength سکشن httpRuntime رو که از زیر سکشن های تگ <system.web> هست به همان میزان تعیین کنید.

پارامتر BAU-GenerateUniqueFileName تعیین می کند که آیا نام فایل آپلودی باید تغییر یافته و برابر با یک عبارت GUID تنظیم شود یا خیر. معمولاً این مقدار رو باید به True تنظیم کنید تا از Overwrite شدن فایل آپلودی بر روی فایلی با نام مشابه جلوگیری کنید.

اگر یکی از سه پارامتر فوق در فایل Web.Config وجود نداشته باشند یا مقدار نامعتبری به اونها نسبت داده بشه، در زمان آپلود با خطا مواجه خواهید شد. البته برای این کامپوننت روتین کنترل خطای خوبی در سمت Client پیاده سازی کردم که در ادامه با اون آشنا خواهید شد.

کار ما با BAU Handler به اتمام رسیده است.
حال سراغ BAU Control می رویم. ظاهر کنترل BAU از یک Progress Bar و یک عبارت که میزان حجم کل فایل و مقدار آپلود شده تا زمان جاری را نمایش می دهد تشکیل شده است.
برای Progress Bar، از کامپوننتی استفاده کردم که با jQuery پیاده سازی شده است. بنابراین نیاز به jQuery دارید. آخرین نسخه ی jQuery در زمان نوشتن این مقاله، نسخه ی 1.4.2 آن است که در فایل ضمیمه موجود است. کامپوننت Progress Bar نیاز به فایل js خود با نام jquery.progressbar.min.js و پوشه ی images دارد. این پوشه در پوشه ی BAU-Test وجود دارد. پس فایل های jquery.progressbar.min.js و jquery-1.4.2.min.js را با استفاده از تگ src در تگ head صفحه قرار داده و پوشه ی images را نیز در کنار صفحه قرار دهید.

بر روی Toolbox راست کلیک و گزینه ی Choose Items را انتخاب کنید. فایل BAUControl.dll را از طریق Browse انتخاب و OK کنید. کنترل BAU که آیکون یک Progress Bar را دارد به Toolbox اضافه می شود. آن را Drag کنید و بر روی صفحه بیندازید. دایرکتیو Register به طور خودکار به بالای صفحه اضافه می شود. سینتکس تعریفی کامپوننت در حالت "پیش فرض" به شکل ذیل خواهد بود:

<cc1:AjaxUploader ID="AjaxUploader1" runat="server" ProgressColor="Red" ProgressTextFormat="Percentage">

</cc1:AjaxUploader>

در نهایت، سلسله مراتب فایل های پروژه به شکل ذیل خواهد بود:

خصیصه های کنترل BAU عبارت اند از:
ButtonName: مقدار دهی به این خصیصه اجباری است. نام دکمه ای را مشخص می کند که قصد دارید با کلیک بر روی آن، عملیات آپلود آغاز شود. این دکمه می تواند از نوع Button، ImageButton یا LinkButton باشد. اگر کنترلی غیر از این نوع کنترل ها را انتخاب کنید، برنامه این مورد را تشخیص داده و در زمان اجرا با خطا مواجه خواهید شد.
FileUploadName: مقدار دهی به این خصیصه اجباری است. نام کنترل FileUpload ای را مشخص می کند که کنترل BAU باید با آن ارتباط برقرار کند.
ProgressColor: مقدار دهی به این خصیصه اختیاری است. رنگ کنترل Progress Bar را تعیین می کند. مقدار این خصیصه یکی از مقادیر Red، Orange و Green یک Enum با نام ProgressColor است. (مقدار پیش فرض، Red است)
ProgressTextFormat: مقدار دهی به این خصیصه اختیاری است. نوع نمایش درصد مقدار آپلود شده را مشخص می کند و یکی از مقادیر Percentage یا Fraction یک Enum با نام ProgressTextFormat را می پذیرد. (مقدار پیش فرض، Percentage است)
IsSupported: مقدار True یا False را برگشت می دهد و فقط خواندنی است. مشخص می کند که کنترل BAU توسط مرورگر پشتیبانی می شود یا خیر.
OnCompletedFunction: مقدار دهی به این خصیصه اختیاری است. این خصیصه نام یک متد جاوا اسکریپت در سمت کلاینت را می پذیرد که این تابع پس از پایان عملیات آپلود فراخوانی می شود. به عنوان مثال می توانید در تابعی که به این خصیصه معرفی می کنید، با استفاده از دستور alert، اتمام موفقیت آمیز عملیات آپلود را به کاربر گزارش دهید. به عنوان مثال، تابعی که در Demo ی برنامه نوشتم به شکل ذیل هست:

function onCompleted() {

            alert("File Uploaded");

}

OnErrorFunction: مقدار دهی به این خصیصه اختیاری است. این خصیصه نام یک تابع جاوا اسکریپت در سمت کلاینت را می پذیرد که این تابع در صورت وقوع خطا در زمان آپلود فراخوانی می شود. سینتکس این تابع به شکل ذیل است:

functionName(code)

پارامتر code یک کد HTTP است که Handler BAU در صورت وقوع خطا ارسال می کند. کدهای HTTP که ارسال می شوند و در پارامتر code قرار می گیرند عبارت اند از:
کد 400: در صورتی که درخواست ارسالی نامعتبر باشد و Header های لازم را به همراه نداشته باشد، کد 400 برگشت داده می شود.
کد 404: در صورتی که یکی از مقادیر مورد نیاز BAU Handler در فایل Web.Config وجود نداشته باشند یا مسیر تعیین شده برای ذخیره ی فایل ها بر روی سرور نامعتبر باشد، کد 404 برگشت داده می شود.
کد 413: در صورتی که میزان حجم فایل انتخاب شده توسط کاربر از میزان حجم مجاز بیشتر باشد، کد 413 برگشت داده می شود.

به عنوان مثال، تابعی که در Demo ی برنامه نوشتم به شکل ذیل هست:

function onError(code) {

            switch (code) {

                case 400:

                    alert("Bad Request");

                    break;

                case 404:

                    alert("Resource Not Found");

                    break;

                case 413:

                    alert("Request Entity Too Large");

                    break;

                default:

            }

}

چند نکته:
1) اعطای مجوز Write را به پوشه ای که فایل های آپلودی در آن قرار می گیرند فراموش نکنید.

2) از آنجا که در حالت local، اجرای برنامه سریع صورت می پذیرد، برای اینکه عملکرد این کامپوننت را بر روی سیستم خود مشاهده کنید، پلاگین Firefox Throttle را برای Firefox از لینک ذیل دانلود و نصب کنید:
https://addons.mozilla.org/en-US/firefox/addon/5917
پس از نصب این پلاگین، در نوار زیرین Firefox، تصویر ذیل را مشاهده خواهید نمود:



بر روی آن راست کلیک و گزینه ی Options را انتخاب کنید. فرمی همانند شکل ذیل را خواهید دید:

تیک گزینه ی Throttle upload را بزنید، گزینه ی Custom را از لیست روبروی آن انتخاب و مقدار را بر روی 5 تنظیم و OK کنید:

حال در سربرگر IPs addresses، تیک گزینه های Throttle all local networks (LAN) connections و Throttle 'localhost' connections را بزنید:

چند امکان دیگر نیز در لیست ToDo دارم که در نسخه های نهایی به این کامپوننت اضافه می کنم.

-----------------------------------------------------------
آپدیت در تاریخ 27/1/89 - انتشار Beta 2

قابلیت های اضافه شده:
1) نمایش سرعت آپلود فایل
2) بررسی میزان حجم فایل ارسالی در سمت Client پیش از شروع عملیات آپلود. در صورتی که میزان حجم فایل انتخاب شده بیش از مقداری باشد که در Web.Config تنظیم کرده اید، بلافاصله این مورد به کاربر اعلام می شود.
3) اضافه شدن رنگ های زرد و مشکی به Progress Bar

دانلود از پست 7 همین تاپیک:
https://barnamenevis.org/showpo...60&postcount=7

-----------------------------------------------------------

آپدیت در تاریخ 30/1/89 - انتشار Beta 3

قابلیت های اضافه شده:
1) آپلود همزمان چند فایل
2) ایجاد قالب دلخواه برای اجزای مختلف کامپوننت

دانلود از پست 22 همین تاپیک:
https://barnamenevis.org/showpo...3&postcount=22
-----------------------------------------------------------

دوستان لطف کنند و این کامپوننت رو تست بفرمایند و در صورتی که هرگونه مشکل، پیشنهاد یا انتقادی داشتید، در همین تاپیک مطرح بفرمایید.

موفق باشید.

[alireza_s_84]

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

[iman_ad]

به نظر من تمام امکان اضافه کردن چند کنترل مشابه telerik که دکمه اد و اضافه داشته باشه، امکان کنسل کردن عملیات آپلود اینا به ذهنم رسید

[Alireza_Salehi]

کار ارزشمندی انجام دادید ولی با توجه به این که فقط در مرورگرهای خاصی و تازه اون هم در جدیدترین نسخه مرورگرهای فوق قابل اجرا است خیلی کاربردی نخواهد بود چون برنامه نویس را مجبور میکند برای حالت های دیگر هم فکری بکند و زحمت برنامه نویس را زیاد می کند. در عین حال حداقل 50 درصد از کاربران از IE استفاده می کنند و حداقل 30 درصد IE6 ، بنابراین برای آنها هم باید فکری شود. راه حل باید جامع باشد.
ولی کار ارزشمندی است، خسته نباشید.

پیشنهاد میکنم برای تکمیل این کنترل به لینک زیر نگاهی بیاندازید(کنترل های آپلود زیادی را تست کرده ام ولی این از همه کاملتر و خوش دست تره):
http://ajaxuploader.com/
با قابلیت انجام آپلود توسط iframe یا flash یا silverlight به صورت اتوماتیک.آپلود همزمان، بررسی نوع و حجم فایل، قابلیت تغییر بخشهای مختلفش توسط template. و بسیاری قابلیت دیگر.

[e-arasteh]

کار ارزشمندی انجام دادید ولی با توجه به این که فقط در مرورگرهای خاصی و تازه اون هم در جدیدترین نسخه مرورگرهای فوق قابل اجرا است خیلی کاربردی نخواهد بود چون برنامه نویس را مجبور میکند برای حالت های دیگر هم فکری بکند و زحمت برنامه نویس را زیاد می کند. در عین حال حداقل 50 درصد از کاربران از IE استفاده می کنند و حداقل 30 درصد IE6 ، بنابراین برای آنها هم باید فکری شود. راه حل باید جامع باشد.
ولی کار ارزشمندی است، خسته نباشید.

پیشنهاد میکنم برای تکمیل این کنترل به لینک زیر نگاهی بیاندازید(کنترل های آپلود زیادی را تست کرده ام ولی این از همه کاملتر و خوش دست تره):
http://ajaxuploader.com/
با قابلیت انجام آپلود توسط iframe یا flash یا silverlight به صورت اتوماتیک.آپلود همزمان، بررسی نوع و حجم فایل، قابلیت تغییر بخشهای مختلفش توسط template. و بسیاری قابلیت دیگر.

سلام این ابزار رایگانه؟

[Alireza_Salehi]

سلام این ابزار رایگانه؟

http://ajaxuploader.com/Order.aspx

[Behrouz_Rad]

دومین نسخه ی آزمایشی این کامپوننت را شاهد هستید. چند قابلیت جدید اضافه کردم.

1) نمایش سرعت آپلود فایل
2) بررسی میزان حجم فایل ارسالی در سمت Client پیش از شروع عملیات آپلود. در صورتی که میزان حجم فایل انتخاب شده بیش از مقداری باشد که در Web.Config تنظیم کرده اید، بلافاصله این مورد به کاربر اعلام می شود.
3) اضافه شدن رنگ های زرد و مشکی به Progress Bar

امکانات دیگه ای رو هم به زودی اضافه می کنم.

مجدداً یادآور می شوم که نسخه ی Demo ی برنامه در آدرس ذیل قرار دارد:
http://bau.codepro.ir

موفق باشید.

[h.alizadeh]

ممنون آقای راد.

من الان فایرفاکس3.5 ندارم تست کنم.ولی توی لوکال با فایرفاکس 3 تست کردم برام این فایل آپلودر اجکس رو نشون میده
ولی دکمه اپلود میزنم پیام مییاد:
Connection Interrupted

ولی توی لینک دمو فکر کنم اصلاح کردید چون پیام میده:
Your Browser Doesn't Support This Component! body { font-family: Tahoma; font-size: 13px; } میگم حالا اگه ما وسط اپلود صفحه سایت رو ببندیم بعد دوباره باز کنیم ودکمه اپلود بزنیم از ادامه ش آپلود میشه؟اگه بشه که خیلی خوبه.(واسه دیال اپی ها مخصوصا وقتی حجم زیاد بخوان اپ کنند)


میگم برای گسترش دادنش میشه از روی مرورگرای اپرا هم ایده گرفت چون اپرام که توی این لینک که دادی نوشتهPresto ولی موقع دانلود درصد دانلود شدن رو نشون میده ....

[Behrouz_Rad]

توی لوکال با فایرفاکس 3 تست کردم برام این فایل آپلودر اجکس رو نشون میده
ولی دکمه اپلود میزنم پیام مییاد:
Connection Interrupted

only Gecko 1.9.1

اگه ما وسط اپلود صفحه سایت رو ببندیم بعد دوباره باز کنیم ودکمه اپلود بزنیم از ادامه ش آپلود میشه؟

Resume؟ ارسال محتوای فایل بر عهده ی مرورگر هست و به شخصه قابلیتی از مرورگرها ندیدم که به وسیله ی اون بشه مرورگر رو مجاب کرد که فایل رو از بایتی خاص ارسال کنه.

میگم برای گسترش دادنش میشه از روی مرورگرای اپرا هم ایده گرفت چون اپرام که توی این لینک که دادی نوشتهPresto ولی موقع دانلود درصد دانلود شدن رو نشون میده ....

بررسی می کنم.

[iman_ad]

Your Browser Doesn't Support This Component!
IE7

[Alireza_Salehi]

اول یک سوال؟
1. پائین ترین نسخه jQuery که این کنترل با آن کار می کند کدام است؟ (از این جهت که نسخه های پائین تر حجم کمتری دارند)


1. کنترل نوع فایل در کلاینت
2. کنسل کردن آپلود - مشخص کردن دکمه مربوطه
3. مخفی شدن امکانات آپلود پس از پایان آپلود و به جای آنها نمایش نام فایل، حجم فایل و دکمه حذف فایل - امکان نمایش آیکون مرتبط با نوع فایل
4. امکان انتخاب پیشوند و یا پسوند برای نام فایلهای آپلود شده.
اشکالات:
5. در هنگام آپلود کنترل های دکمه آپلود و انتخاب فایل غیرفعال شوند
6. progress bar بعد از نمایش دیالوگ آپلود پایان یافت به 100 درصد می رسد.
7. من که هر کاری کردم فایلی در پوشه آپلود قرار نگرفت!!! میگه آپلود تمام شد ولی فایلی نیست!!!
شرایط تست Win 7 x64- ASP.NET Development Server-VS 2008 SP1-Solution Folder on desktop

8. اگر چند بار در داخل یک صفحه استفاده شود فقط اولی نمایش داده می شود.

به نظرم اگر اسمش را می گذاشتید Behoo Ajax Upload Extender بهتر بود...

[Behrouz_Rad]

پائین ترین نسخه jQuery که این کنترل با آن کار می کند کدام است؟ (از این جهت که نسخه های پائین تر حجم کمتری دارند)

1.3.2
وقتی که از CDN استفاده کنی، GZip به فایل اعمال میشه و تفاوت حجم بسیار نامحسوس هست.

من که هر کاری کردم فایلی در پوشه آپلود قرار نگرفت!!! میگه آپلود تمام شد ولی فایلی نیست!!!

آیا دموی ضمیمه رو اجرا کردی یا خودت پروژه ای ایجاد و از این کامپوننت استفاده کردی؟ در صورتی که حالت دوم هست، لطفاً پروژت رو قرار بده.

بقیه ی مواردی که گفتی رو در نسخه های بعدی لحاظ می کنم.
ممنون از توجهت.

[iman_22a]

Your Browser Doesn't Support This Component!
IE7

اینو خود جناب راد گفتند که توی براوزرهای قدیمی جواب نمیده . اما حیف :

[Behrouz_Rad]

اینو خود جناب راد گفتند که توی براوزرهای قدیمی جواب نمیده .

مرورگرهای قدیمی نه! مرورگرهایی که از موتوری غیر از +1.9.1 Gecko استفاده می کنند :)

[Alireza_Salehi]

1.3.2
وقتی که از CDN استفاده کنی، GZip به فایل اعمال میشه و تفاوت حجم بسیار نامحسوس هست.

آیا دموی ضمیمه رو اجرا کردی یا خودت پروژه ای ایجاد و از این کامپوننت استفاده کردی؟ در صورتی که حالت دوم هست، لطفاً پروژت رو قرار بده.

بقیه ی مواردی که گفتی رو در نسخه های بعدی لحاظ می کنم.
ممنون از توجهت.

با وجود CDN هم نسخه فعلی با نسخه قبلی 5 کیلو تفاوت دارند و بدون CDN 20 کیلو...
حالا... خیلی مهم نیست. وقتی از قابلیت های نسخه جدیدش استفاده نمیشه لزومی نداره بی خودی حجم صفحه بالا برود ضمن این که CDN گوگل همه نسخه ها را دارد.
5 کیلو - 5 کیلو جمع شود وانگهی سایت کند شود...

در ضمن یک مسئله مهم
این روش هنوز کاملا استاندارد نشده (draft) و در وضعیت فعلی هم ظاهرا نمیشه از یک جای خاصی از فایل شروع به آپلود کرد به نظرم خیلی زوده برای استفاده از این روش تازه اگر استاندارد هم بشه با این همه مرورگر که ساپورت نمی کنند چه کنیم؟
http://www.w3.org/TR/file-upload/
http://blog.igstan.ro/2009/01/pure-j...le-upload.html

[Behrouz_Rad]

این روش هنوز کاملا استاندارد نشده (draft) و در وضعیت فعلی هم ظاهرا نمیشه از یک جای خاصی از فایل شروع به آپلود کرد به نظرم خیلی زوده برای استفاده از این روش تازه اگر استاندارد هم بشه با این همه مرورگر که ساپورت نمی کنند چه کنیم؟

مشکل اصلی برنامه نویسان وب هم همین هست که هر مرورگری ساز خودش رو میزنه!...

اون مشکلی که برای آپلود داشتی حل شد؟

[Alireza_Salehi]

اشتباه تنظیمات بود:
<runtime maxRequestLength="30000">
به جای این
<httpRuntime maxRequestLength="300000"/>

...

هر چند کنترل هیچ خطائی نمیداد و به یک جائی که میرسید فریز میشد (که کمتر از 4096 بود). بهتر بود یک خطائی صادر می کرد.

در این حالت یک فایل 0 بایتی هم ایجاد میکرد که باید جلوی آن گرفته شود.


ظاهرا آپلود همزمان چند فایل هم در این روش ساپورت نمی شود (فقط آخری در نظر گرفته می شود)...

به جای اون پیشوند و پسوند که گفتم اگر خاصیتی داشته باشد که مثل String.Format کار کند خیلی عالی میشه، مثلا:

AjaxUploader1.UploadedFileNameFormat="art{0}x.{1}"

صفر: نام فایل
یک: پسوند فایل
دو : حجم فایل

[Alireza_Salehi]

دراین روش طبق draft استاندارد w3 فقط آخری باید در نظر گرفته شود...

یک بار این کنترل را در حالت دو تائی تست کن اتفاقات جالبی پیش میاد :
1. فقط یک بار کنترل نمایش داده می شود،
2. وقتی هر دو دکمه آپلود کلیک شود
progress هی پر و خالی می شود، عقب و جلو می رود و در آخر فقط فایل دوم دو بار آپلود می شود.

بای دوقتی بیش از یک بار استفاده می شود Exception صادر شود
یا اگر می شود مشکل حل گردد

[Behrouz_Rad]

arsp_2004@
مواردی که گفتی رو لحاظ می کنم.

مرسی از توجهت و وقتی که گذاشتی :)

[iman_ad]

اگه روی ie جواب نده نمی شه ازش استفاده کرد، مگه چند نفر از فایرفاکس استفاده می کنند!!
به نظر بنده باید با IE حداقل سازگار باشه

[CodeMasterX]

اگه روی ie جواب نده نمی شه ازش استفاده کرد، مگه چند نفر از فایرفاکس استفاده می کنند!!
به نظر بنده باید با IE حداقل سازگار باشه

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

بهروزجان دستت درد نکنه، گرچه یه سری کنترل واسه اینکار دیده بودم ولی کلا از ایده استفاده از فریم خوشم نمیومد، این کنترل خوبیه. موارد دیگه رو هم که دوستان اشاره کردن. منتظر نسخه های بعدی هستم.

با تشکر

[Behrouz_Rad]

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

قابلیت دیگر، اضافه کردن قالب دلخواه به بخش های مختلف این کامپوننت هست که موجب شد طرز کار اون کمی تفاوت بکنه. سه Property جدید با مقداردهی اجباری به این کامپوننت اضافه کردم به شرح ذیل:
StatControlId: این خصیصه، id یک کنترل html از نوع span یا div رو می پذیره که باید "میزان حجم آپلود شده و حجم کل فایل" در اون نمایش داده بشه. می تونید کلاس دلخواهی رو با استفاده از CSS تعریف و به تگ مورد نظر نسبت بدید تا ظاهر دلخواهی رو برای نمایش داشته باشید.
SpeedControlId: این خصیصه، id یک کنترل html از نوع span یا div رو می پذیره که باید "سرعت آپلود" در اون نمایش داده بشه. می تونید کلاس دلخواهی رو با استفاده از CSS تعریف و به تگ مورد نظر نسبت بدید تا ظاهر دلخواهی رو برای نمایش داشته باشید.
ProgressSpanId: به این خصیصه، حتما باید مقدار id یک تگ span با مقدار progressBar برای خاصیت class اون نسبت بدید. دقت داشته باشید که نیاز نیست کلاس progressBar رو با CSS تعریف کنید. این تگ span مکان قرارگیری Progress Bar رو بر روی صفحه مشخص می کنه.

مثالی از نحوه ی تعریف و استفاده از این کامپوننت با آخرین تغییرات:

            <asp:FileUpload ID="FileUploader1" runat="server" />

            <asp:Button ID="btnUpload" runat="server" Text="Upload" />

            <BAU:AjaxUploader ID="AjaxUploader1" runat="server" SpeedControlId="speed1" StatControlId="stat1"

                ProgressSpanId="pb1" ButtonName="btnUpload" FileUploadName="FileUploader1" ProgressColor="Red"

                ProgressTextFormat="Percentage" OnCompletedFunction="onCompleted" OnErrorFunction="onError">

            </BAU:AjaxUploader>

            

            <br />

            <span id="stat1"></span>

            <br />

            <span id="speed1"></span>

            <br />

            <span id="pb1" class="progressBar"></span>

موفق باشید.

[Alireza_Salehi]

آپلود همزمان به خوبی کار می کند.


و اما ایرادها:
1. کلا با حالت design مشکل دارد

2. با کنترل MultiView کار نمی کند:
در حالت design:

با این کد:

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

            <asp:View ID="View1" runat="server">

                <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" />

            </asp:View>

            <asp:View ID="View2" runat="server">

                <asp:Panel ID="uploadContainer" runat="server">

                    <asp:FileUpload ID="FileUploader1" runat="server" />

                    <asp:Button ID="btnUpload" runat="server" Text="Upload" />

                    <BAU:AjaxUploader ID="AjaxUploader1" runat="server" SpeedControlId="speed1" StatControlId="stat1"

                        ProgressSpanId="pb1" ButtonName="btnUpload" FileUploadName="FileUploader1" ProgressColor="Red"

                        ProgressTextFormat="Percentage" OnCompletedFunction="onCompleted" OnErrorFunction="onError">

                    </BAU:AjaxUploader>

                    <br />

                    <span id="stat1"></span>

                    <br />

                    <span id="speed1"></span>

                    <br />

                    <span id="pb1" class="progressBar"></span>

                </asp:Panel>

                ----------------------------------------------------------------

                <asp:Panel ID="Panel1" runat="server">

                    <asp:FileUpload ID="FileUpload1" runat="server" />

                    <asp:Button ID="Button1" runat="server" Text="Upload" />

                    <BAU:AjaxUploader ID="AjaxUploader2" runat="server" SpeedControlId="speed2" StatControlId="stat2"

                        ProgressSpanId="pb2" ButtonName="Button1" FileUploadName="FileUpload1" ProgressColor="Red"

                        ProgressTextFormat="Percentage" OnCompletedFunction="onCompleted" OnErrorFunction="onError">

                    </BAU:AjaxUploader>

                    <br />

                    <b><span id="stat2"></span></b>

                    <br />

                    <span id="speed2"></span>

                    <br />

                    <span id="pb2" class="progressBar"></span>

                </asp:Panel>

            </asp:View>

        </asp:MultiView>

protected void Button2_Click(object sender, EventArgs e)

    {

        MultiView1.SetActiveView(View2);

    }

اگر روی دکمه کلیک شود، خطای XML Parse ایجاد می شود .


3 . داخل آپدیت پنل کار نمیکند

4. وقتی داخل LoginView قرار بگیرد چنین خطائی تولید می کند:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0103: The name 'AjaxUploader1' does not exist in the current context

Source Error:


Line 10: protected void Page_Load(object sender, EventArgs e)
Line 11: {
Line 12: if (!AjaxUploader1.IsSupported)
Line 13: {
Line 14: uploadContainer.Visible = false;
Source File: c:\Users\Alireza\Desktop\BAU-Test_Beta3_by_Behrouz_Rad\BAU-Test\Default.aspx.cs Line: 12

5. اگر داخل هر container دیگری باشد کار نمی کند ، مثلا یک Panel پدر هم داشته باشد (علاوه بر مال خودش)

به نظر میرسه این داستان ClientId ها رو رعایت نکردی...

داخل صفحات MasterPage دار درست کار می کند...

[Behrouz_Rad]

arsp_2004@
متد FindControl ای که نوشتم به صورت Generic هست و به صورت تابع بازگشتی کنترل مورد نظر رو پیدا و ClientID اون رو برگشت میده.
مواردی که گفتی رو بررسی می کنم.
در UpdatePanel نباید هم کار کنه... با ذات UpdatePanel تداخل داره... این کنترل خودش بر پایه ی AJAX هست.

[Alireza_Salehi]

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

این طوری که داره پیش میره محدوده عملکرد این کنترل خیلی محدود میشه....!؟

حالا چی شد که این کنترل رو نوشتی؟ تمرین؟ هیجان؟ پیش قدم شدن برای 10 سال آینده؟
چون کاربردش بدجوری محدوده...

[alireza_s_84]

این طوری که داره پیش میره محدوده عملکرد این کنترل خیلی محدود میشه....!؟
حالا چی شد که این کنترل رو نوشتی؟ تمرین؟ هیجان؟ پیش قدم شدن برای 10 سال آینده؟
چون کاربردش بدجوری محدوده...

آره والله چرا مایکروسافت UpdatePanel رو تولید کرد چون خیلی محدودیت داره فکر میکنم به یکی از علتهای زیر باشه:
تمرین؟ هیجان؟ پیش قدم بسوی 10 سال اینده که سرعت اینترنت خیلی میره بالا؟؟؟

[Alireza_Salehi]

آره والله چرا مایکروسافت UpdatePanel رو تولید کرد چون خیلی محدودیت داره فکر میکنم به یکی از علتهای زیر باشه:
تمرین؟ هیجان؟ پیش قدم بسوی 10 سال اینده که سرعت اینترنت خیلی میره بالا؟؟؟

این کندی باعث نشده که خیلی ها ازش استفاده نکنند، بالاخره با این که کنده جزو پر استفاده ترین فریمورک های آجاکس هست.

در بسیاری شرایط سهولت ایجاد برنامه با MS Ajax ، کند بودنش رو جبران میکنه...

شرایط پروژه مشخص کننده نحوه انتخاب ابزارهاست...

[Behrouz_Rad]

حالا چی شد که این کنترل رو نوشتی؟ تمرین؟ هیجان؟ پیش قدم شدن برای 10 سال آینده؟
چون کاربردش بدجوری محدوده...

اصولاً خیلی وقت ها یک کلمه یا عبارت کافیه تا جرقه ای در ذهن فردی برای خلق چیزی به وجود بیاد... اینکه این کامپوننت فعلاً فقط در موتور Gecko کار می کنه مانعی نبود که من بخوام از تصمیمم برای خلق اون چشم پوشی کنم... محدودیت مرورگر من رو محدود نمی کنه... خصیصه ی IsSupported به من کمک می کنه تا اگر نتونستم از این کامپوننت استفاده کنم، روش معمول خودم رو در پیش بگیرم.

موفق باشید.

[iman_ad]

چرا از روش هایی که کنترهایی مثل telerik استفاده می کنند استفاده نکردید؟ تلریک یک کنترل مشابه داره.
آیا دلیل خاصی داره که از این تکنولوژی استفاده کردید.

[Behrouz_Rad]

آیا دلیل خاصی داره که از این تکنولوژی استفاده کردید.

در دنیا چیزی رو بدون علت نمی تونی پیدا کنی. دلیلش استفاده از قابلیت جدید اضافه شده به XMLHttpRequest بود :)

[ehsan2007]

حالا چی شد که این کنترل رو نوشتی؟ تمرین؟ هیجان؟ پیش قدم شدن برای 10 سال آینده؟
چون کاربردش بدجوری محدوده...

خیلی ناراحت شدم این نوشته رو دیدم
والله تا یکی دو سال پیش میگفتن آجاکس توی مرورگر ها پشتیبانی نمیشه (واسه ie یک مدل کد باید بنویسی واسه ff یک مدل دیگه) و فرد باید جاوا اسکریپت روی مرورگرش فعال باشه
اما چی شد
اینم همینجوری رشد میکنه
حالا مهندس راد زودتر دست بکار شده اینو ساخته دلیل نمیشه شما این حرف و بهش بزنی

[alireza_s_84]

خیلی ناراحت شدم این نوشته رو دیدم
والله تا یکی دو سال پیش میگفتن آجاکس توی مرورگر ها پشتیبانی نمیشه (واسه ie یک مدل کد باید بنویسی واسه ff یک مدل دیگه) و فرد باید جاوا اسکریپت روی مرورگرش فعال باشه
اما چی شد
اینم همینجوری رشد میکنه
حالا مهندس راد زودتر دست بکار شده اینو ساخته دلیل نمیشه شما این حرف و بهش بزنی

نخیر مهندس راد قتل کرده باید مجازات بشه چرا این کامپوننت رو تولید کرد چرا نذاشت من تولیدش کنم؟؟؟
با عرض پوزش از مهندس راد

[Alireza_Salehi]

خیلی ناراحت شدم این نوشته رو دیدم
والله تا یکی دو سال پیش میگفتن آجاکس توی مرورگر ها پشتیبانی نمیشه (واسه ie یک مدل کد باید بنویسی واسه ff یک مدل دیگه) و فرد باید جاوا اسکریپت روی مرورگرش فعال باشه
اما چی شد
اینم همینجوری رشد میکنه
حالا مهندس راد زودتر دست بکار شده اینو ساخته دلیل نمیشه شما این حرف و بهش بزنی

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

فعلا مشکل اینه که مردم ما اینترنت درست و حسابی ندارند که مرورگر جدید دانلود کنند و حدود 40-50 درصد هنوز از IE6 استفده می کنند.در حال حاظر اکثر طراحان وب، وب سایت ها را با پایه IE6 طراحی می کنند مگر این که کارفرما هزینه امکانات خاص برای هر مرورگر را بپردازند.

قبل از نظر دادن گوگل کنید و ببینید دیگران هم آیا روی این موضوع کار کرده اند یا نه...

بحث بنده و آقا بهروز دوستانه و فنی است دلیلی ندارد شما نگران شوید.

[ehsan2007]

اتفاقا بنده خیلی هم از این جور پروژه ها استقبال میکنم.

بحث بنده و آقا بهروز دوستانه و فنی است

چه زیبا استقبال و چه زیبا بحث دوستانه و فنی میکنید!!!!!!!

حالا چی شد که این کنترل رو نوشتی؟ تمرین؟ هیجان؟ پیش قدم شدن برای 10 سال آینده؟

دیدید که بجز من چند تا از دوستان دیگه هم ناراحت شدند (نه نگران)

[h.alizadeh]

خاصیتProgressColor در نسخه بیتا3 کار نمیکنه در همه حالت قرمز نشون میده

[Behrouz_Rad]

خاصیتProgressColor در نسخه بیتا3 کار نمیکنه در همه حالت قرمز نشون میده

تقریباً درست کار می کنه. فقط یک مشکل وجود داره و اون هم در اسکریپ جاوا اسکریپتی هست که فقط یک بار به صفحه اضافه میشه. برای همین چون پیش بینی تعداد وجود کامپوننت ها امکان پذیر نیست، رنگی رو که برای اولین Progress Bar تعیین می کنید به Progress Bar های بعدی نیز منتقل میشه. در حقیقت اولین Progress Bar هست که رنگ Progress Bar های بعدی رو هم مشخص می کنه.
سعی می کنم این مشکل رو برطرف کنم.

موفق باشید.

[h.alizadeh]

آره همینطوره ولی وقتی هم که داره پر میشه درصدهای اولش بازم قرمز نشون میده هم بعد وقتی مثلا به 50 درصدبالا میرسه، رنگ پرشدن تغییر میکنه و بقیه یش به رنگ ست شده ما نشون میده.

[Behrouz_Rad]

کلا با حالت design مشکل دارد

حل شد.

با کنترل MultiView کار نمی کند. اگر روی دکمه کلیک شود، خطای XML Parse ایجاد می شود .

Http Handler دست و پام رو بسته بود. مجبور شدم کنترل بیشتری روی Pipeline داشته باشم. به همین دلیل به Http Module سویچ کردم. مشکل حل شد.

وقتی داخل LoginView قرار بگیرد چنین خطائی تولید می کند:

اگر داخل هر container دیگری باشد کار نمی کند ، مثلا یک Panel پدر هم داشته باشد (علاوه بر مال خودش)

امکانش رو داری برای دو مورد فوق Demo قرار بدی؟

[Alireza_Salehi]

وقتی با LoginView کار میکند کنترل را پیدا نمی کند
وقتی هم با کنترل های Container مثل Wizard کار می کند در صورت PostBack شدن آن کنترل (مثلا Step های ویزارد عوض شود یا دکمه next آن کلیک شود) خطای XML Parse با محتوای no element found ایجاد می شود.

با حالت Panel هم نیمدونم چرا خطا ایجاد نکرد !!! دفعه قبل خطا داشت... مجدد تست میکنم مشکل رو پیدا کم.

به نظرم یک قابلیتی به این کنترل اضافه کن که در صورت نبودن هر یک از ملزوماتش غیر فعال شود (تنظیم نبودن web.config و نبودن jQuery و نبودن هر یک از کنترل هایش)

[Behrouz_Rad]

arsp_2004@
ممنون میشم مواردی که گفتی رو با فایل ضمیمه بررسی کنی.