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

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

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

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

 FileUpload

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

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

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

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

<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 زیر را برای آن قرار می دهیم :

#FileUpload
        {
            display:none;
        }

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

 $(window).load(function () { 
        $("#ifileupload").click(function () {
            $("#FileUpload").click();
        });
        });

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

fileUpload

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

<asp:FileUpload ID="fumember" ClientIDMode="Static" runat="server" /><br />
      <img src="upload.png" id="ifileupload" data-file="fumember"  class="fileupload"/>

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

       $(".fileupload").click(function () {
            var filename = $(this).attr("data-file");
            $("#"+filename).click();
        });

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

 input[type=file]
        {
            display:none;
        }

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

دانلود کدهای پروژه


توسط : عثمان رحیمی  3 ماه قبل ، پنج شنبه 8 آبان 1393 ساعت 20:31  0  2545

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


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط