改变文件域的样式实现思路同时兼容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判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
微信小程序实现弹出层效果
May 26 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 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
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php连接mysql数据库
2017/03/21 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python 正则式使用心得
2009/05/07 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python二维码生成识别实例详解
2019/07/16 Python
logging level级别介绍
2020/02/21 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Django权限控制的使用
2021/01/07 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
主管竞聘书范文
2014/03/31 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
雷峰塔导游词
2015/02/09 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Python os和os.path模块详情
2022/04/02 Python