改变文件域的样式实现思路同时兼容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 相关文章推荐
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
vue实现登录功能
Dec 31 Vue.js
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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python lxml模块安装教程
2015/06/02 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python环境变量设置方法
2016/08/28 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
给海归自荐信的建议
2013/12/13 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
秋季运动会加油词
2015/07/18 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL