改变文件域的样式实现思路同时兼容ie、firefox
2013-10-23 00:00
537 查看
<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
- 改变文件域的样式-兼容ie、firefox
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等
- js实现上传文件大小限制,兼容IE、Firefox、Chrome
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等
- jquery 通过flash多文件上传 实现IE和firefox兼容 java版
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式
- java版 jquery uploadify 通过Flash实现多文件上传 IE 和FireFox 兼容
- php 实现文件下载,兼容IE、Firefox、Chrome等浏览器
- 利用POI读取Excel数据,实现同时读取多个Excel文件,兼容所有浏览器
- C#实现多个文件同时下载的思路整理
- javascript实现css主题样式切换;动态改变引入的css文件;
- onbeforeunload事件中调用Ajax实现用户注销操作(兼容IE、Firefox、Chrome)
- 一种颇为取巧,但同时兼容ie和firefox的,防止table被撑大的,并且自适应屏幕宽度的方法
- js实现兼容IE、Firefox的图片缩放代码
- firefox 和 ie 事件处理的细节-----书写同时兼容ie和ff的事件处理代码
- 让我们的jsp文件可以兼容IE7/8同时还能兼容IE11代码
- 兼容IE、新版Chrome、Firefox,实现本地图片等比例缩放预览
- 定制html原生上传组件样式,实现兼容包括IE在内的所有浏览器。