文件上传控件的变脸

简介: 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)控件的点击事件

img_a6339ee3e57d1d52bc7d02b338e15a60.gif < input  type ="file"  id ="btnFile"  onpropertychange ="txtFoo.value=this.value;"  style ="visibility:hidden" >< br >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< input  type ="text"  id ="txtFoo"  readonly style ="width: 353px;background-color:#D6FFD6" >  
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< input  type ="button"  onclick ="btnFile.click()"  value ="选择文件"  style ="background-color:#E3ECE7;border:1 solid black;" >


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

效果图:
faceOff.JPG
目录
相关文章
|
2月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
33 1
|
5月前
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
31 0
|
9月前
|
前端开发
前端代码分享——霓虹灯图标菜单特效(内含源码)
前端代码分享——霓虹灯图标菜单特效(内含源码)
|
JavaScript 开发者
ElUpload不好用?一文教你实现一个简易图片上传预览组件
ElUpload不好用?一文教你实现一个简易图片上传预览组件
358 0
|
移动开发 JavaScript 测试技术
《大胖 • 小课》- 拖拽和剪贴板文件上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第5节-《实现文件拖拽和剪贴板上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口 《大胖 • 小课》- 不用 js 实现文件无刷新上传 《大胖 • 小课》- 玩玩多文件配多进度上传
126 1
《大胖 • 小课》- 拖拽和剪贴板文件上传
|
XML JavaScript 前端开发
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
156 0
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
|
SQL JavaScript 前端开发
【自然框架】之鼠标点功能现(二):表单控件的“应用”—— 代码?只写需要的!
  【自然框架】之鼠标点功能现(一):单表的增删改查(即上次5月23日活动的一个主题)【Demo、源码下载】           看了大家的回复,好像不少人误会了,我为了突出“鼠标点,功能现”,所以没有说代码,没有贴代码,这就让一些人认为我想要完全抛弃VS,自己写一个“平台”来代替,不好意思,您高估我了,我可达不到。
843 0
|
XML C# 数据格式
WPFの操作文件浏览框几种方式
原文:WPFの操作文件浏览框几种方式 方式1: 使用win32控件OpenFileDialog Microsoft.Win32.OpenFileDialog ofd = new Microsoft.
1039 0