给FileUpload按钮添加背景图片

 给FileUpload添加背景图片，其实不是直接添加。虽然可以设置FileUpload的CSS样式。但却无法做到设置上传控件的那个按钮（比如给这个上传按钮添加图片）。VS并没有提供现成的属性。所以想想是否可以考虑 模拟一个类似上传的控件。答案是肯定的。

我在网上找了好多。有人说自己弄一个按钮+文本框来实现上传的功能，而按钮是可以添加图片背景的。当然我相信这个应该是可以实现的。但是是不是很麻烦呢?

我在网上发现一个很不错的方法，现在为我所用。并且成功的实现了。所以接下来我就谈谈如何去实现。

原理：

利用CSS。让真正的“上传”控件透明，让<img/>显示。而<img/>来显示要显示的图片。这两个控件重叠（图片在下，真正的“上传”控件在上），单击图片时实际上是单击了"上传"控件。让“上传”控件通过js事件来传递文件路径给新建的文本框，来模拟"上传"控件的文本框。（我觉得这真的是一种巧妙的方法，因为并没有抛弃真正的上传控件来使自己做一个拥有上传功能的组合控件）

如果还是不懂，那就直接看实例吧。看完实例后再看原理就OK了。

代码如下：

<table>
<tr>
<td>
<input readonly="readonly" id="path" style="width:200px"/> //模拟上传控件的文本框
</td>
<td>
<div style="position: absolute; z-index: 2; cursor:hand;">
<input id="FileUpload" type="file" style="filter: alpha(opacity=0);width: 20px; height:auto; cursor: hand;" οnchange="path.value=this.value"
runat="server" /> //通过onchange事件来修改模拟文本框的值。runat="server"这样后台也能识别该控件了
</div>
<div style="position: absolute; z-index: 1; cursor: hand;">
<img src="../images/inputUpload.jpg" style="cursor: hand;" /> //自定义背景图片
</div>
</td>
<td>
<div>
<asp:Button ID="upload" runat="server" Text="上传" οnclick="upload_Click" />
</div>
</td>
</tr>
</table>

实现的效果如下图：

怎么样？很传神吧，其实看到的"浏览..."按钮就是<img/>添加的背景图片。 而真正的“上传”控件已经隐藏了（透明），但在<img/>的上方。

控件之间具体的样式自己就可以在style里面调试了。

说明：

上面的上传控件用的是html控件，虽然<asp:FileUpload/>同样可以，但是无法很好的实现onchange事件(可能会有方法，但是又会涉及到其它的难点，有兴趣的可以研究下)那样就不能模拟上传控件的文本框了。当然，如果不需要模拟那个文本框，大可以用<asp:FileUpload/>这个控件。