改变文件域的样式实现思路同时兼容ie、firefox
更新时间：2013年10月23日 17:10:58 作者：
正如标题所言只是模拟了file文件域的外观，其实起作用的还是文件域file，这样就很方便，感兴趣的朋友可以了解下
复制代码 代码如下:
<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实现动态表格的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
javascript创建页面蒙板的一些知识技巧总结...2007-08-08
这篇文章主要为大家详细介绍了原生JS实现自定义滚动条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了JavaScript 原始包装类型汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
uniapp 使用 tree.js 解决模型加载不出来的问题及解决方法
本文介绍了在uniapp中使用tree.js时遇到的模型加载不出来的问题,并最终发现是由于缩放问题导致的,通过调用`getFitScaleValue()`方法解决了这个问题,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了LayUI下拉树TreeSelect的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Decorator装饰器是ES7的时候提案的特性，目前处于Stage 3候选阶段（2022年10月）。装饰器简单来说就是修改类和类方法的语法糖，很多面向对象语言都有装饰器这一特性。本文就来说说如何在JavaScript中使用装饰器，需要的可以参考一下2022-10-10
这篇文章主要介绍了如何使用JavaScript创建实时数据可视化图表,我们将使用流行的图表库,如Chart.js,来展示如何将实时数据动态呈现在图表中,感兴趣的可以了解下2024-01-01
这篇文章主要介绍了js实现从数组里随机获取元素的方法，以及个人封装的js代码分享，十分的实用，这里推荐给小伙伴们2015-01-01
最新评论