改变文件域的样式实现思路同时兼容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 相关文章推荐
iphone safari不支持position fixed的解决方法
May 04 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
mouse_on_title.js
2006/08/25 Javascript
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript 特殊字符串
2009/02/25 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
jquery实现拖动效果
2016/08/10 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python合并文本文件示例
2014/02/07 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python使用configparser库读取配置文件
2020/02/22 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
优秀学生评语大全
2014/04/25 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书