工作小结（十一）－能否定义上传框的样式

能否定义上传框的样式
解决思路 ：
       该控件能直接通过定义CSS改变的样式很有限。而且因为安全性上的问题，该控件也比较特殊，很难用其它元素模拟。本例将通过一步步的探讨研究直到问题得以解决。
具体步骤 ：
1.先测试一下下面的代码看看：
<input type="file" style="border:1px solid blue;color:red; background:green;font:bold 12px ’隶书’;height:18px;width:160px">
代码运行效果：

图1.4.34 CSS定义的上传控件

可以看到，上传框带有两个控件：一个文本框和一个按钮。定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和宽高生效。看来此路不通。
2.我们知道，大部分控件都有一个单击click事件句柄，上传框在单击"浏览..."按钮时会弹出"选择文件"对话框，如果我们 自己模拟一个上传框：一个文本框和一个按钮 (<input type="button">或<button>Text</button>)，在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...于是有：

<style>
.file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()">
<input name="upload" type="file" id="t_file" onchange="f_file.value=this.value" style="display:none">

代码运行效果：

图1.4.35 模拟的上传控件

3.在单击" 上传文件"按钮时执行t_file.click()，当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value，即保持真正的上传框与模拟的上传框的值同步更新，style="display:none"让真正的上传框隐藏，让模拟的以假乱真 ------问题似乎解决了。不过，把代码放到表单中测试一下看看：

<style>
.file{border:1px solid #333333;color:#666666;
background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" class="file" id="f_file">
<input type="button" value="上传文件" class="file"
 onClick="t_file.click()">
<input name="upload" type="file" id="t_file"
 onchange="f_file.value=this.value">
<input type="submit">
</form>

代码运行效果：

图1.4.36在表单中的模拟上传控件和真正的上传控件

为了便于观察效果，这里没有让真正的上传控件隐藏。在单击"上传文件"按钮后再提交表单，可以看到，真正的上传框的内容被清空了，意思就是说，这样模拟出来的上传框没有任何意义，因为没办法上传文件。
4.之所以是这个结果， 估计是因为微软出于安全方面的考虑，只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传 。难道再没别的办法了？当然有！看看下面的代码：
<script>
function fclick(obj){
  with(obj){
    style.posTop=event.srcElement.offsetTop   
//设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
    style.posLeft=event.x-offsetWidth/2       
/*设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围*/
  }
}
</script>
<style>
input{border:1px solid #333333;color:#666666;
background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form method="post" action="" enctype="multipart/form-data">
<input id="f_file">&nbsp;
<input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="upload" type="file"
 style="position:absolute;filter:alpha(opacity=0);width:30px;" 
id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>

代码运行效果：

图1.4.37 上传控件的终极模拟

 5.直接看代码可能一时还难以明白过来，不过可以把上传框的透明度增加到百分之三十再看看效果：

 <input name="upload" type="file" style="position:absolute;
filter:alpha(opacity=30);width:30px;" id="t_file"
 onchange="f_file.value=this.value" hidefocus>

图1.4.38 模拟上传框的奥秘

技巧：要更精确的控制透明上传框的X坐标 ，可把脚本部分修改如下：

<script>
function fclick(obj){
  var el=event.srcElement
  with(obj){
    style.posTop= el.offsetTop
    var x=event.x-offsetWidth/2
    if(x<el.offsetLeft)
x=el.offsetLeft
    if(x> el.offsetLeft+ el.offsetWidth-offsetWidth)
x=el.offsetLeft+el.offsetWidth-offsetWidth
    style.posLeft=x
  }
}
</script>
注意：上传表单的method必须为post，enctype必须为multipart/form-data。
特别提示
本例代码运行后能完全模拟实现上传控件的功能，因为它本身就是基于上传控件的。
最终代码：

Code
 1 <script> 
 2function fclick(obj){ 
 3  with(obj){ 
 4    style.posTop=event.srcElement.offsetTop+17 
 5//设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐 
 6    style.posLeft=event.x-offsetWidth+20       
 7/**//*设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围*/ 
 8  } 
 9} 
10    </script>
11
12    <style>
13        input
14        {}{
15            border: 1px solid #333333;
16            color: #666666;
17            background: #eeeeee;
18            font: normal 12px Tahoma;
19            height: 18px;
20        }
21    </style>
22    <form method="post" action="" enctype="multipart/form-data">
23    <input id="f_file">&nbsp;
24    <input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
25    <input name="upload" type="file" style="position: absolute; filter: alpha(opacity=30);
26        width: 30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
27    <br>
28    <input type="submit" value="提交">
29    </form>

实例使用：
1.前台：

Code
 1<input id="UrlText" type="text" runat="server" />
 2<input id="Button1" runat="server" type="button" value="浏览"  class="fslbtn"/>
 3<div id="inputFileDiv" runat="server" style="position:absolute;z-index:99;">
 4   <input id="myFile" type="file" runat="server" style=" width: 76px;position: absolute; filter: alpha(opacity=0); cursor: pointer;" size="0" hidefocus />
 5</div>
 6
 7<script type="text/javascript" language="javascript">
 8    function SetInputFilePosition<%= Button1.ClientID %>(btn){
 9        
10         var   ttop     =   btn.offsetTop;           //TT控件的定位点高   
11          var   thei     =   btn.clientHeight;     //TT控件本身的高   
12          var   tleft   =   btn.offsetLeft;         //TT控件的定位点宽   
13          var   ttyp     =   btn.type;                     //TT控件的类型 
14          
15         //alert(ttop + " " + thei + " " + tleft + " " + ttyp);
16         var fileObj = document.getElementById('<%= inputFileDiv.ClientID %>');
17         var tempObj = btn.offsetParent;
18         while(tempObj)
19         {
20            ttop+=tempObj.offsetTop;   
21            tleft+=tempObj.offsetLeft;
22            tempObj = tempObj.offsetParent;
23         }  
24         if(fileObj != null)
25         {
26            if(btn != null){
27                fileObj.style.top = ttop;
28                fileObj.style.left = tleft-6;
29            }
30         }
31    }
32    function OnFileSelectedChange<%= myFile.ClientID %>(){
33         var fileObj = document.getElementById('<%= myFile.ClientID %>');
34         var textObj = document.getElementById('<%= UrlText.ClientID %>');
35         textObj.value = fileObj.value;
36    }
37    
38</script>

2.后台：

1 Button1.Attributes[ " onmouseover " ]  =   " SetInputFilePosition "   +  Button1.ClientID  +   " (this) " ;
2 myFile.Attributes[ " onpropertychange " ]  =   " OnFileSelectedChange "   +  myFile.ClientID  +   " () " ;