文件上传控件的变脸

简介: WEB开发有些时候我们会遇到弹出文件对话框,选择一个本地文件的需求。在ASP.NET 2.0下,我们可以直接采用FileUpload控件来做到这一点。这是一个组合控件,由一个文本框和一个按钮组成,实质就是html下的input(file)控件。

WEB开发有些时候我们会遇到弹出文件对话框,选择一个本地文件的需求。
在ASP.NET 2.0下,我们可以直接采用FileUpload控件来做到这一点。
这是一个组合控件,由一个文本框和一个按钮组成,实质就是html下的input(file)控件。

使用方法:
前台
<asp:FileUpload ID="FileUpload1" runat="server" />

后台
//获取选择文件完整路径
string fileName = this.FileUpload1.PostedFile.FileName;

使用起来没有问题,但是我们会遇到这样一个问题:控件样式不好设置,浏览按钮的文本也不能改变。
那么如何可以做到变脸呢?我们只能变通一下,一点小技巧:
1 放一个input(file)控件,设置风格为隐藏,属性改变事件中指定选中值赋值到输出的文本框控件上
2 放一个input(text)控件,设置为只读
3 放一个button控件,设置点击事件为input(file)控件的点击事件

< input  type ="file"  id ="btnFile"  onpropertychange ="txtFoo.value=this.value;"  style ="visibility:hidden" >< br >

        
< input  type ="text"  id ="txtFoo"  readonly style ="width: 353px;background-color:#D6FFD6" >  

        
< input  type ="button"  onclick ="btnFile.click()"  value ="选择文件"  style ="background-color:#E3ECE7;border:1 solid black;" >


这样一次改变,便能修改文本框和按钮的样式和文本,实现变脸。

效果图:

目录
相关文章
wps插入图片显示不全、混乱
wps插入图片显示不全、混乱
122 0
|
前端开发
清明节,如何用代码让网页变灰
清明节,如何用代码让网页变灰
|
小程序
小程序实现图片预览+上传
小程序实现图片预览+上传
174 0
|
移动开发 JavaScript 测试技术
《大胖 • 小课》- 拖拽和剪贴板文件上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第5节-《实现文件拖拽和剪贴板上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口 《大胖 • 小课》- 不用 js 实现文件无刷新上传 《大胖 • 小课》- 玩玩多文件配多进度上传
179 1
|
前端开发 开发者
网站都变灰了,几行代码可以实现
网站都变灰了,几行代码可以实现
140 0
网站都变灰了,几行代码可以实现
|
安全 Windows
将爱心代码设为电脑屏保,还能假装黑客大佬,在酷炫的界面中保护隐私
本文介绍 Hacker Screen Saver 一款开源 Windows 屏保的使用。Hacker Screen Saver 是一款 .NET 设计的屏幕保护程序,可以显示 HTML 页面,你可以将黑客模拟器的网页,或者爱心代码网页设置为你的 Windows 电脑屏保。详细介绍了软件的使用和对应网页的修改和制作注意事项。
658 0
将爱心代码设为电脑屏保,还能假装黑客大佬,在酷炫的界面中保护隐私
|
JavaScript 开发者
ElUpload不好用?一文教你实现一个简易图片上传预览组件
ElUpload不好用?一文教你实现一个简易图片上传预览组件
2501 0
|
前端开发 小程序 大数据
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
176 0
你真的会做小程序按钮吗?看了字节35K前端的样式设计,悟了
|
前端开发
前端工作总结123-视频上传和图片编辑功能
前端工作总结123-视频上传和图片编辑功能
105 0
前端工作总结123-视频上传和图片编辑功能
|
弹性计算 Linux
将表白页面上传到服务器
一、安装FileZilla 二、上传
将表白页面上传到服务器

热门文章

最新文章