编程 Javascript

改变文件域的样式实现思路同时兼容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，这样就很方便。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS中处理与当前时间间隔的函数代码

May 23 Javascript

jquery等宽输出文字插件使用介绍

Sep 18 Javascript

两个数组去重的JS代码

Dec 04 Javascript

js实现倒计时时钟的示例代码

Dec 17 Javascript

jQuery 写的简单打字游戏可以提示正确和错误的次数

Jul 01 Javascript

jquery事件的ready()方法使用详解

Nov 11 Javascript

Node.js用readline模块实现输入输出

Dec 16 Javascript

AngularJS 限定$scope的范围实例详解

Jun 23 Javascript

Vue.js实现按钮的动态绑定效果及实现代码

Aug 21 Javascript

详解webpack性能优化——DLL

Oct 20 Javascript

React Native使用Modal自定义分享界面的示例代码

Oct 31 Javascript

vue项目在webpack2实现移动端字体自适配功能

Jun 02 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