说起上传就不得不谈到文件上传控件:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
然而这个上传控件是一个文本框和一个按钮,这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。
在上网查找相关资料,得到下面一些信息:
我们知道,大部分控件都有一个单击(Click)事件句柄,上传框在点击”浏览”文件对话框,如果我们自己模拟一个上传框,和一个按钮,在单击自定义按钮时候同事触发上传框的Click事件让它弹出文件对话框:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
然而当该代码放在表单中时候,点击提交表单时候,真正的上传框的内容被清空了。意思就是说,这样模拟出来的上传框没有任何意义的。因为没有办法上传文件。之所以是这样的结果,估计是因为微软处于安全方面的考虑。只有当鼠标真正上传在上传控件的按钮上浏览到的文件才可以看到(否则你进入我的页面,我就可以随心所欲的得到你的私密文件).
看来用这种方法是行不通的。于是在网上又找了一种思路:当鼠标移动到上传图片的按钮上时候,让真正的文件上传控件移动到鼠标所在的按钮位置上,那样的话当点击按钮时候,实际上点击的是真正的文件上传控件(设置透明度为0),这样不就解决问题了吗?
参考下面的代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
最后,听了同事们的建议,终于找到了一个方法来实现:
让真正的文件上传控件和模拟的上传按钮分别放到一个层里面去。然后让这2个层重叠。设置z-index属性,让真正的文件上传控件所在的层在外面,并设置为透明。这样当点击按钮时候实际尚就点击文件上传控件了。根本就不需要那脚本来控制控件的位置。
的确是一个好方法。我按照这个思想终于实现了。下面是参考代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
在服务器端访问上传的文件名:this.fileAttachment.PostedFile.FileName果然能正常访问,而且我把这个控件放到包含框架的页面上也能准确的定位。简直太妙了。
下面是显示的效果:是不是比默认的要好看多了。和项目的风格和统一起来了.