وضع Style او تغير شكل FileUpload Control

السلام عليكــم ورحمـة الله وبركاتــة

عندما كنت اراجع ال Client Feedback وجدت ضمن طلباته تغير كلمة Browse الموجودة الي كلمة اخري.

فظننت ان الامر بسيط و ممكن تكون خاصية موجودة في FileUpload Control و لكن ال Input File Tag لا يخضع تحت قوانين ال CSS و لا الكود فهو متعلق بالمتصفح

و لا يوجد سبيل لتعديل كلمة browse بشكل مباشر

بعد البحث وجدت طرقتين للتحايل علي ذلك

الاولي : باستخدام ال HTML Tags بشكل تقليدي و لكن لم تفلح في النهاية (سوف يأتي التوضيح)

الثانية : استخدام ال CSS و نجحت هذه الطريقة (لا اجد غيرها)

بمساعدة Javascript في الطريقتين

الطريقة الاولي :

الفكرة :

- اضافة FileUpload Control ليتم استخدامه في الخلفية (مخفي باستخدام Client Style)و اظهار Tags اخري كواجهه له

- وضع button بديل لل browse button بالنص الذي نريد و عند الضغط عليه يتم استدعاء حدث click الخاص بال FileUpload باستخدام Javascript

- وضع textBox كبديل لل textBox الخاص بال FileUpload Control (او Input File Tag) و كلما تغير الملف المختار يتم تحديث قيمتها

-بعد ذلك استخدام button لعمل Upload File

اضافة ال Controls و HTML Tags

<form id="form1" runat="server">

    <asp:FileUpload ID="originalFileUpload" style="visibility:hidden" onchange="SetTxtSelectedFile();" runat="server" /> 

    <br />
    <br />

    <input id="txtSelectedFile" type="text" />
    <input id="btnFakeBrowse" type="button" onclick="ShowBrowseDialog();" value="Custom browse" />

    <br />   
    <br />

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

    <br />
    <br />

    <asp:Label ID="lblInfo" runat="server"></asp:Label>

   </form>

تم اضافة FileUpload يسمي originalFileUpload و مخفي باستخدام خاصية Style.Visibility و عند تغير قيمته(الملف المختار) يقوم بتحديث ال textBox البديل المسمي txtSelectedFile عن طريق استدعاء دالة SetTxtSelectedFile في حدث onchange

و ايضا اضافة Html Button يسمي btnFakeBrowse لاستدعاء حدث Click الخاص بال FileUpload في حدث click الخاص به باستخدام دالة ShowBrowseDialog

ثم ايضا button لعمل Upload للملف بقرأة مسار الملف من FileUpload control المخفي و يسمي btnUpload

دوال ال Javascript بالشكل التالي

<script type="text/javascript">
function ShowBrowseDialog()
{
    var originalFileUploadRef = document.getElementById('<%= originalFileUpload.ClientID %>');
    originalFileUploadRef.click();
}

function SetTxtSelectedFile()
{
    var txtSelectedFileRef = document.getElementById('txtSelectedFile');
    txtSelectedFileRef.value = document.getElementById('<%= originalFileUpload.ClientID %>').value;
}
</script>

لا توجد مشكلة في الشكل فقد تم ما اريد من تغير الشكل و كلمة browse

و ايضا ظهور نافذة اختيار ملف و تحديث مسار الملف في ال txtSelectedFile Textbox و ايضا اختيارها في ال FileUpload

و لكن عند استخدام Upload button لم اجد شئ في ال FileUpload و لا اجد الملف الذي تم اختياره و بعد البحث اتضح لي (و الله اعلم)ان ال FileUpload او HTML Input tag يجب التعامل معهم بشكل مباشر من المستخدم و لا يقبل التعامل من الكود .

طبعا حبيت اعرف ليه قالوا Security المهم حتي الان لا اعرف لهذه المشكلة حل ربما الله يفتح علي احدكم و يأتي بالحل ان شاء الله(بالانتظار)

الطريقة الثانية: المصدر لهذه الفكرة

الفكرة :

لابد من ضمان ضغط المستخدم علي Browse Button الخاص بال FileUpload Control (لتفادي مشكلة الطريقة الاولي) و في نفس الوقت اظهار الشكل الذي نريده

بمعني ان نظهر ال Tags التي نريد و يكون تحتها ال fileUpload control بحيث يري المستخدم الشكل المطلوب و عند الضغط يضغط علي ال FileUpload نفسه

الموضوع مرتبط بالشفافية و ال z-index (يستخدم لترتيب ال Tags/Layers فوق بعضها و كلما زادت القيمة كلما ارتفع ال tag او layer الي اعلي )

-انشاء Div tag و جعل ال Position بداخله relative

div.fileinputs 
{
	position: relative;
}

و اضافة التالي بداخلها

- اضافة Input File Tag و جعل ال Style الخاص به بالشكل التالي

input.file 
{
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

لاحظ ان opacity: 0 بمعني عدم ظهورها و z-index: 2

- اضافة Div تحتوي علي ال tags (زر بديل ب browse و textBox) التي تظهر في نفس مكان ال Input File Tag

div.fakefile 
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

لاحظ ان position: absolute بمعني امكانية وضع ال Div في مكان محدد مثلا النقطة (0,0) بالنسبة لل container div و ايضا ال z-index يساوي 1 بمعني انها تكون تحت ال input file tag في الترتيب و لكن تظهر هي لشفافية ال input file tag بشكل تام

و يكون شكل ال DIVs بالشكل التالي

<div class="fileinputs">
<input type="file" id="originalFileUpload" onchange="SetTxtSelectedFile();" runat="server" class="file" />
<div class="fakefile">

<input type="text" id="txtSelectedFile" />

<input type="button" value="Custom browse" onclick="ShowBrowseDialog();" />

</div>
</div>

الشكل النهائي

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">

div.fileinputs 
{
	position: relative;
}

div.fakefile 
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file
{
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

</style>    


<script type="text/javascript">
function ShowBrowseDialog()
{
    var originalFileUploadRef = document.getElementById('originalFileUpload');
    originalFileUploadRef.click();
}

function SetTxtSelectedFile()
{
    var txtSelectedFileRef = document.getElementById('txtSelectedFile');
    txtSelectedFileRef.value = document.getElementById('originalFileUpload').value;
}
</script>

</head>
<body>
    <form id="form1" runat="server">

        <div class="fileinputs">
	        <input type="file" id="originalFileUpload" onchange="SetTxtSelectedFile();" runat="server" class="file" />
	        <div class="fakefile">

	        	<input type="text" id="txtSelectedFile" />

	        	<input type="button" value="Custom browse" onclick="ShowBrowseDialog();" />

	        </div>
        </div>

        <br />
        <br />

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

        <br />
        <br />

        <asp:Label ID="lblInfo" runat="server"></asp:Label>

    </form>
</body>
</html>

يوجد في المرفقات موقع يحتوي علي صفحتين لتطبيق الطرقتين

FileUploadBrowseText.zip