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

189 阅读 0 评论 125 点赞

我是靠谱客的博主烂漫鸡翅，最近开发中收集的这篇文章主要介绍改变文件域的样式实现思路同时兼容ie、firefox，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<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，这样就很方便。