改变文件域的样式实现思路同时兼容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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP实现文件下载详解
2014/11/27 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
JS模板实现方法
2013/04/03 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
使用python实现BLAST
2018/02/12 Python
详解python之协程gevent模块
2018/06/14 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python中线程和进程有何区别
2020/06/17 Python
考试不及格的检讨书
2014/01/22 职场文书
学习决心书范文
2014/03/11 职场文书
工地安全质量标语
2014/06/07 职场文书
大学生心理活动总结
2014/07/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
运动会通讯稿300字
2015/07/20 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android