改变文件域的样式实现思路同时兼容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 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
EsLint入门学习教程
Feb 17 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python写入CSV文件的方法
2015/07/08 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
浅析python继承与多重继承
2018/09/13 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
任意存:BOXFUL
2018/05/21 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
优秀语文教师事迹
2014/05/18 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
警示教育观后感
2015/06/17 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS