改变FileUpLoader 样式 (FileUpLoader js)

叁歲伎倆 2022-01-07 03:57 199阅读 0赞

![UpLoad.gif][]

在目前做的移动项目开发中，我负责了一个文件上传控件的开发。(效果图如上)在开发的过程中遇到了一些问题，但最后通过不段的查找和测试，终于把问题解决了。下面我把解决问题的思想记录下来，愿意和朋友们分享。当然也希望朋友们能提出其他的解决方案。共同交流。

说起上传就不得不谈到文件上传控件:

![None.gif][] < input  type ="file"  name ="t\_file" >

然而这个上传控件是一个文本框和一个按钮，这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。

在上网查找相关资料，得到下面一些信息：

我们知道，大部分控件都有一个单击(Click)事件句柄，上传框在点击”浏览”文件对话框，如果我们自己模拟一个上传框,和一个按钮，在单击自定义按钮时候同事触发上传框的Click事件让它弹出文件对话框：

![None.gif][] < input  type =”text”  id =”f\_file” />   
![None.gif][] < img  src =””  onClick =”t\_file.Click()” >   
![None.gif][] < input  type =”file”  name =”upload”  id =”t\_file”  onchange =”f\_file.value=this.value”  style =”display:none;” />   
![None.gif][]

在点击上传按钮时候执行

![None.gif][] t\_file.Click()

当上传框的值有所改变时候通过 onchange 事件执行 f\_file.value=this.value ，即保持真正的上传框和模拟的上传框的值同步更新， style= ” display:none ” , 让真正的上传框隐藏，使模拟的文件上传框能以假乱真。

然而当该代码放在表单中时候，点击提交表单时候，真正的上传框的内容被清空了。意思就是说，这样模拟出来的上传框没有任何意义的。因为没有办法上传文件。之所以是这样的结果，估计是因为微软处于安全方面的考虑。只有当鼠标真正上传在上传控件的按钮上浏览到的文件才可以看到（否则你进入我的页面，我就可以随心所欲的得到你的私密文件）.

看来用这种方法是行不通的。于是在网上又找了一种思路：当鼠标移动到上传图片的按钮上时候，让真正的文件上传控件移动到鼠标所在的按钮位置上，那样的话当点击按钮时候，实际上点击的是真正的文件上传控件（设置透明度为0），这样不就解决问题了吗？

参考下面的代码：

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] < script > ![dot.gif][]   
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]function fclick(obj)![dot.gif][]\{  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]  with(obj)![dot.gif][]\{  
![InBlock.gif][]    style.posTop=event.srcElement.offsetTop  
![InBlock.gif][]    var x=event.x\-offsetWidth/2  
![InBlock.gif][]    if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft  
![InBlock.gif][]    if(x>event.srcElement.offsetLeft\+event.srcElement.offsetWidth\-offsetWidth)x=event.srcElement.offsetLeft\+event.srcElement.offsetWidth\-offsetWidth  
![InBlock.gif][]    style.posLeft=x  
![ExpandedSubBlockEnd.gif][]  \}  
![ExpandedBlockEnd.gif][]\}  
![None.gif][] </ script >   
![None.gif][] < form  method ="post"  action =""  enctype ="multipart/form-data" >   
![None.gif][] < input  id ="f\_file" > &nbsp; < input  type ="button"  onmouseover ="fclick(t\_file)"  value ="選擇上傳文件" >< input  name ="upload"  type ="file"  style ="position:absolute;filter:alpha(opacity=30);width:30px;"  id ="t\_file"  onchange ="f\_file.value=this.value"  hidefocus >   
![None.gif][] < br >< input  type ="submit"  value ="提交" >   
![None.gif][] </ form >   
![None.gif][]

上面的代码我把它放在新建立的一个aspx页面上做了一个测试，果然能够在服务器端能够访问到客户端上传的文件名。

上面的测试成功了。然而我把上面的代码放到实际的页面上时候，确另我大吃一惊。当鼠标移动到按钮上的时候，那个真正的文件上传控件没有移动到按钮上来。当点击按钮时候就没有反应。后来才发现真正的项目页面中运用了iframe框架，于是我就绝对那个控制位置的那段脚本在框架页面尚好像不是很符合。于是我修改那段脚本。但最后的效果都不是很另人满意。这个问题花了我近1天时间，真是太郁闷了。

最后，听了同事们的建议，终于找到了一个方法来实现：

让真正的文件上传控件和模拟的上传按钮分别放到一个层里面去。然后让这2个层重叠。设置z-index属性，让真正的文件上传控件所在的层在外面，并设置为透明。这样当点击按钮时候实际尚就点击文件上传控件了。根本就不需要那脚本来控制控件的位置。

**最终实现：**

的确是一个好方法。我按照这个思想终于实现了。下面是参考代码：

![None.gif][] < table >   
![None.gif][]     < tr >   
![None.gif][]         < td >   
![None.gif][]             < asp:Label  ID ="lblAttachmentType"  runat ="server" ></ asp:Label ></ td >   
![None.gif][]         < td >   
![None.gif][]             < input  readonly ="readonly"  class ="inputNormal"  id ="<%=this.ClientID %>file"  type ="text"   
![None.gif][]                size ="36"  style ="width: 100px;"  name ="f\_file"  hidefocus ></ td >   
![None.gif][]         < td >   
![None.gif][]             < div  style ="position: absolute; z-index: 2; cursor:hand;" >   
![None.gif][]                 < input  id ="fileAttachment"     style ="filter: alpha(opacity=0); width: 20px; height:auto; cursor: hand;"  type ="file"   
![None.gif][]                    runat ="server"   />   
![None.gif][]             </ div >   
![None.gif][]             < div  style ="position: absolute; z-index: 1; cursor: hand;" >   
![None.gif][]                 < img  src ="<%=ViewUpLoadImgUrl%>"  style ="cursor: hand;"   />   
![None.gif][]             </ div >   
![None.gif][]             &nbsp;   &nbsp;    &nbsp;   &nbsp;    &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   
![None.gif][]             < asp:ImageButton  ID ="btnUpload"     runat ="server"  ImageAlign ="Middle"   
![None.gif][]                ImageUrl ="~/App\_Themes/Default/Images/btnUpload.gif"  OnClick ="btnUpload\_Click"   />   
![None.gif][]         </ td >   
![None.gif][]         < td >   
![None.gif][]             < a  runat ="server"  target ="\_blank"  id ="contenturl" ></ a >   
![None.gif][]         </ td >   
![None.gif][]     </ tr >   
![None.gif][] </ table >   
![None.gif][]

FF下方透明度设定：

IE：

filter:alpha(Opacity=XX)  
其中XX从0到100，0是全完透明

而firefox中不支持css的filter属性，透明的话要在style中写：  
\-moz-opacity:XX  
这里的XX是个小数，从0到1，0也是完全透明

在服务器端访问上传的文件名：this.fileAttachment.PostedFile.FileName果然能正常访问，而且我把这个控件放到包含框架的页面上也能准确的定位。简直太妙了。

下面是显示的效果：是不是比默认的要好看多了。和项目的风格和统一起来了.

![UpLoad.gif][]

非常感谢作者!本文来源：[http://www.cnblogs.com/Charles2008/archive/2008/07/20/1247084.html][http_www.cnblogs.com_Charles2008_archive_2008_07_20_1247084.html]

转载于:https://www.cnblogs.com/netwenchao/archive/2009/12/28/1634442.html

[UpLoad.gif]: /images/20211227/a80f6d8d26f5441a8304954448c02daa.png
[None.gif]: /images/20211227/d08a6bf6d69d4fd3bc1a0590a4952a6e.png
[ExpandedBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20211227/f357420c0cd34bf3a33018f2d874ffc4.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[InBlock.gif]: /images/20211227/cd11d8ba631e4de28e8d531760183b4a.png
[ExpandedSubBlockEnd.gif]: /images/20211227/b751b50e1af9426ba5d28ecdd5a5ffc0.png
[ExpandedBlockEnd.gif]: /images/20211227/998dddc3d48e4180bda3a08958bb07bb.png
[http_www.cnblogs.com_Charles2008_archive_2008_07_20_1247084.html]: http://www.cnblogs.com/Charles2008/archive/2008/07/20/1247084.html