تغییر ظاهر کنترل FileUpload
در بیشتر سایت ها شاهد نمایش یکسانی برای کنترل FileUpload هستیم . می توان گفت کنترل FileUpload جزو آن کنترل هایی می باشد که تقریبا بیشتر طراحان وب آن را بدون هیچ تغییری در نمایش آن به کار خواهند برد و کنترل خصوصیات آن را بر عهده مرورگر می گذارند . در این مقاله راه حلی را ارائه خواهیم کرد در جهت تغییر شکل پیش فرض کنترل FileUpload در ASP.NET و در آخر مقداری آن را بهینه خواهیم کرد .
شاید این سوال برای بعضی از طراحان پیش بیاید که چرا اصلا باید شکل این کنترل را تغییر داد ؟
– مرورگرهای مختلف هر کدام کنترل FileUpload را به گونه ای نمایش می دهند و نتیجه نمایش تقریبا مطابق میل شما نیست . عکس زیر نمایشی از این کنترل در چهار مرورگر مختلف می باشد :
– در سایت های فارسی وقتی تمام کنترل ها از جمله دکمه ها ، لینک ها و … فارسی هستند بهتر آن است تا بقیه کنترل ها هم به صورت فارسی طراحی شوند .
ایده ای که برای این کار توصیه می شود به این صورت است که کنترل FileUpload را مخفی کرده کرده و رویداد کلیک آن را با یک لینک یا عکس مورد نظر توسط Jquery فراخوانی خواهیم کرد .
قصد داریم بجای نمایش پیش فرض از این 
عکس استفاده کنیم.(می توانید از هر عکس استفاده کنید).
پروژه ی جدید از نوع ASP.NET Web forms ایجاد کنید ، صفحه جدید به آن اضافه کنید کنترل های زیر را به آن اضافه کنید :
|
1 2 3 4 5 6 |
<form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload" runat="server" ClientIDMode="Static" /><br /> <span>لطفا فایل مورد نظر را انتخاب نمایید : <img src="upload.png" id="ifileupload" /></span> </div> </form> |
در مرحله بعد نیاز است تا کنترل اصلی FileUpload را از دید کاربر مخفی کنیم برای این کار css زیر را برای آن قرار می دهیم :
|
1 2 3 4 |
#FileUpload { display:none; } |
تا اینجای کار کنترل FileUpload را از دید کاربر مخفی کردیم ، حال باید زمانی که کاربر بر روی عکس مربوطه کلیک کرد رویداد Click کنترل fileUpload را فراخوانی کنیم ، برای این کار قطعه کد زیر را قرار میدهیم :
|
1 2 3 4 5 |
$(window).load(function () { $("#ifileupload").click(function () { $("#FileUpload").click(); }); }); |
بعد از اجرای پروژه با کلیک بر روی عکس مربوطه رویداد کلیک کنترل FileUpload اجرا می شود و کاربر می تواند فایل مورد نظر خود را انتخاب کند .
کدهای فوق یک مشکل اساسی دارد وآن این است که تا حدودی بهینه نیست ، فرض کنید در چند جای پروژه نیاز به کنترل fileupload باشد ، با این شرایط باید برای تمامی آن ها کدهای جکوری فوق را تکرار کنیم که این کار باعث افزایش حجم کدنویسی می شود . پیشنهاد من برای این کار افزودن یک custome data attribute به کنترل img با مقدار ID کنترل فایل آپلود می باشد و در کدهای جکوری این مقدار را خوانده و رویداد کلیک آن را فراخوانی می کنیم به صورت زیر :
|
1 2 |
<asp:FileUpload ID="fumember" ClientIDMode="Static" runat="server" /><br /> <img src="upload.png" id="ifileupload" data-file="fumember" class="fileupload"/> |
و کدهای جکوری را به صورت زیر تغییر می دهیم :
|
1 2 3 4 |
$(".fileupload").click(function () { var filename = $(this).attr("data-file"); $("#"+filename).click(); }); |
و برای اینکه هر بار کنترل fileupload را با نام مورد نظر مخفی نکنیم ، css را به صورت زیر تغییر خواهیم داد :
|
1 2 3 4 |
input[type=file] { display:none; } |
با این کار در هر صفحه ای که نیاز به کنترل fileUpload داشته باشد کافیست یک کنترل FileUpload و یک کنترل دلخواه(عکس / لینک) در صفحه قرار دهید و ID کنترل Fileupload را به Attribute کنترل دلخواه مورد نظر (عکس / لینک) اضافه کنید .
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.