编程 Javascript

改变文件域的样式实现思路同时兼容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，这样就很方便。

改变文件域的样式实现思路同时兼容ie、firefox

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript smipleChart 简单图标类

Jan 12 Javascript

chrome浏览器不支持onmouseleave事件的解决技巧

May 31 Javascript

js 操作select与option(示例讲解)

Dec 20 Javascript

事件委托与阻止冒泡阻止其父元素事件触发

Sep 02 Javascript

Javascript中的Callback方法浅析

Mar 15 Javascript

jQuery仿天猫实现超炫的加入购物车

May 04 Javascript

JQuery控制DIV的选取实现方法

Sep 18 Javascript

javascript中的面向对象

Mar 30 Javascript

JavaScript简介_动力节点Java学院整理

Jun 26 Javascript

AngularJS中scope的绑定策略实例分析

Oct 30 Javascript

详解vue-property-decorator使用手册

Jul 29 Javascript

vue3.0+vue-router+element-plus初实践

Dec 02 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

Apache连接PHP后无法启动问题解决思路

2015/06/18 PHP

PHP给文字内容中的关键字进行套红处理

2016/04/12 PHP

Docker 如何布置PHP开发环境

2016/06/21 PHP

php文件操作之文件写入字符串、数组的方法分析

2019/04/15 PHP

Laravel中10个有用的用法小结

2019/05/06 PHP

Extjs3.0 checkboxGroup 动态添加item实现思路

2013/08/14 Javascript

$.get获取一个文件的内容示例代码

2013/09/11 Javascript

给js文件传参数(详解)

2014/07/13 Javascript

Javascript进制转换实例分析

2015/05/14 Javascript

js实现选中复选框文字变色的方法

2015/08/14 Javascript

使用 jQuery.ajax 上传带文件的表单遇到的问题

2016/10/31 Javascript

jQuery实现可兼容IE6的滚动监听功能

2017/09/20 jQuery

vue 自定义组件的写法与用法详解

2020/03/04 Javascript

在Vue中使用HOC模式的实现

2020/08/23 Javascript

vue实现防抖的实例代码

2021/01/11 Vue.js

python 第三方库的安装及pip的使用详解

2017/05/11 Python

python获取程序执行文件路径的方法(推荐)

2018/04/26 Python

django admin后台添加导出excel功能示例代码

2019/05/15 Python

Python比较配置文件的方法实例详解

2019/06/06 Python

python基于pdfminer库提取pdf文字代码实例

2019/08/15 Python

Django 对IP访问频率进行限制的例子

2019/08/30 Python

Python API len函数操作过程解析

2020/03/05 Python

Python实现常见的几种加密算法(MD5，SHA-1，HMAC，DES/AES，RSA和ECC)

2020/05/09 Python

详解如何修改jupyter notebook的默认目录和默认浏览器

2021/01/24 Python

利用CSS3实现文本框的清除按钮相关的一些效果

2015/06/23 HTML / CSS

CSS3中的display:grid，网格布局介绍

2019/10/30 HTML / CSS

详解html5 shiv.js和respond.min.js

2018/01/24 HTML / CSS

End Clothing美国站：英国男士潮牌商城

2018/04/20 全球购物

幼儿园元旦活动感言

2014/03/02 职场文书

反腐倡廉观后感

2015/06/08 职场文书

2016年校园重阳节广播稿

2015/12/18 职场文书

Html5通过数据流方式播放视频的实现

2021/04/27 HTML / CSS

我对PyTorch dataloader里的shuffle=True的理解

2021/05/20 Python

Redis 持久化 RDB 与 AOF的执行过程

2021/11/07 Redis

教你nginx跳转配置的四种方式

2022/07/07 Servers

uniapp开发打包多端应用完整方法指南

2022/12/24 Javascript