改变文件域的样式实现思路同时兼容ie、firefox


Posted in Javascript onOctober 23, 2013
<body> 
<input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" /> 
<input id="ye" style="color: green;border: 1px solid green;width:300px;" /> 
<input type="button" value="File" style="border: 1px solid green;width:80px;" /> 
</body> <script language="javascript"> 
function getValue(){ 
document.getElementById('ye').value = document.getElementById('j').value; 
} 
</script>

思路:

1、把顽固的文件域就是<input type=file /> 透明化:style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;"

2、用一个文本框和按钮代替文件与的外观

3、将文件域的浏览按钮放到我们写的按钮的上方

4、用js得到文件域value改变时的值即:得到的文件路径,并赋给文本框的value,这样就ok了

我只是试验,样式很简陋;其实可以进一步美化;

这样的好处:只是模拟了file文件域的外观,其实起作用的还是文件域file,这样就很方便。

Javascript 相关文章推荐
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
vue组件间通信解析
Mar 01 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 #Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 #Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 #Javascript
ajax与302响应代码测试
Oct 23 #Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 #Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 #Javascript
Javascript简单实现可拖动的div
Oct 22 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP通用检测函数集合
2011/02/08 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python开发的HTTP库requests详解
2017/08/29 Python
python 读取DICOM头文件的实例
2018/05/07 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python3中布局背景颜色代码分析
2020/12/01 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS