改变文件域的样式实现思路同时兼容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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
图解js图片轮播效果
Dec 20 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
js实现列表按字母排序
Aug 11 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
js 小数取整的函数
2010/05/10 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python实现趣味图片字符化
2019/04/30 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python滑块验证码的破解实现
2019/11/10 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
创业资金计划书
2014/02/06 职场文书
学生自我评语大全
2014/04/18 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
标准毕业生自荐信
2014/06/24 职场文书
实习证明格式范文
2014/10/14 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
影视后期实训报告
2014/11/05 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书