改变文件域的样式实现思路同时兼容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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
javascript验证身份证号
Mar 03 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php中的静态变量的基本用法
2014/03/20 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
javascript学习之闭包分析
2010/12/02 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python生成器generator原理及用法解析
2020/07/20 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
C#公司笔试题
2014/03/28 面试题
区三好学生主要事迹
2014/01/30 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书