改变文件域的样式实现思路同时兼容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 在光标定位的地方插入文字的插件
May 10 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jQuery原生的动画效果
Jul 10 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
基于PHP文件操作的详解
2013/06/05 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
django 实现电子支付功能的示例代码
2018/07/25 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python yield关键词案例测试
2019/10/15 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
出国签证在职证明
2014/01/16 职场文书
护士辞职信范文
2014/01/19 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
中学总务处工作总结
2015/08/12 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript