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

前端技术 2023/09/08 JavaScript
复制代码 代码如下:

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

本文地址：https://www.stayed.cn/item/20722

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案