改变文件域的样式实现思路同时兼容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 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
详解jQuery事件
Jan 13 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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
php生成二维码
2015/08/10 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
工程现场管理求职自荐信
2013/10/02 职场文书
导游个人求职信范文
2014/03/23 职场文书
合作意向书格式及范文
2014/03/31 职场文书
建筑安全责任书范本
2014/07/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技