سبد خرید 0

وبلاگ

تغییر ظاهر کنترل FileUpload

در بیشتر سایت ها شاهد نمایش یکسانی برای کنترل FileUpload هستیم . می توان گفت کنترل FileUpload جزو آن کنترل هایی می باشد که تقریبا بیشتر طراحان وب آن را بدون هیچ تغییری در نمایش آن به کار خواهند برد و کنترل خصوصیات آن را بر عهده مرورگر می گذارند  . در این مقاله راه حلی را ارائه خواهیم کرد در جهت تغییر شکل پیش فرض کنترل FileUpload در ASP.NET و در آخر مقداری آن را بهینه خواهیم کرد .

شاید این سوال برای بعضی از طراحان پیش بیاید که چرا اصلا باید شکل این کنترل را تغییر داد ؟

– مرورگرهای مختلف هر کدام کنترل FileUpload را به گونه ای نمایش می دهند و نتیجه نمایش تقریبا مطابق میل شما نیست . عکس زیر نمایشی از این کنترل در چهار مرورگر مختلف می باشد :

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

ایده ای که برای این کار توصیه می شود به این صورت است که کنترل FileUpload را مخفی کرده کرده و رویداد کلیک آن را با یک لینک یا عکس مورد نظر توسط Jquery فراخوانی خواهیم کرد .

قصد داریم بجای نمایش پیش فرض از این FileUpload  عکس استفاده کنیم.(می توانید از هر عکس استفاده کنید).

پروژه ی جدید از نوع ASP.NET Web forms ایجاد کنید ، صفحه جدید به آن اضافه کنید  کنترل های زیر را به آن اضافه کنید :

 در مرحله بعد نیاز است تا  کنترل اصلی FileUpload را از دید کاربر مخفی کنیم برای این کار css زیر را برای آن قرار می دهیم :

 تا اینجای کار کنترل FileUpload را از دید کاربر مخفی کردیم ، حال باید زمانی که کاربر بر روی عکس مربوطه کلیک کرد رویداد  Click کنترل fileUpload را فراخوانی کنیم ، برای این کار قطعه کد زیر را قرار میدهیم :

بعد از اجرای پروژه با کلیک بر روی عکس مربوطه رویداد کلیک کنترل FileUpload اجرا می شود و کاربر می تواند فایل مورد نظر خود را انتخاب کند .

کدهای فوق یک مشکل اساسی دارد وآن این است که تا حدودی بهینه نیست ،  فرض کنید در چند جای پروژه نیاز به کنترل fileupload باشد ، با این شرایط باید برای تمامی آن ها کدهای جکوری فوق را تکرار کنیم که این کار باعث افزایش حجم کدنویسی می شود . پیشنهاد من برای این کار افزودن یک custome data attribute به کنترل img با مقدار ID کنترل فایل آپلود می باشد و در کدهای جکوری این مقدار را خوانده و رویداد کلیک آن را فراخوانی می کنیم به صورت زیر :

و کدهای جکوری را به صورت زیر تغییر می دهیم :

و برای اینکه هر بار کنترل fileupload را با نام مورد نظر مخفی نکنیم ، css را به صورت زیر تغییر خواهیم داد :

 با این کار در هر صفحه ای که نیاز به کنترل fileUpload داشته باشد کافیست یک کنترل FileUpload و یک کنترل دلخواه(عکس / لینک) در صفحه قرار دهید و ID کنترل Fileupload را به Attribute کنترل دلخواه مورد نظر (عکس / لینک) اضافه کنید .

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

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

keyboard_arrow_up