将file标签的"浏览"按钮换成别的语言或图片(转自别人)

最新推荐文章于 2021-08-19 00:48:36 发布

临海听风_518

最新推荐文章于 2021-08-19 00:48:36 发布

阅读量310

点赞数

分类专栏： JSP使用心得与体会文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84505149

版权

JSP使用心得与体会专栏收录该内容

36 篇文章 1 订阅

订阅专栏

如何将INPUT type=file 的"浏览..."按钮换成图片呢?

方法一：（仅支持IE）

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<!--

function test1(){

form1.fileABC.click();

form1.textfield.value =form1.fileABC.value;

}

//-->

</SCRIPT>

</HEAD>

</form>

</body>

</HTML>

主要思路：采用CSS把FILE控件隐藏掉，新增加一个TEXT的输入框和图片按钮，把TEXT输入框的属性设置为readonly，用户点击

图片按钮时通过JS触发隐藏的FILE控件的click事件，然后把从选择文件得到的值传递给text文本框，从而实现楼主要求的效果。

当然这只是画面上的效果而已，服务器端文件内容的时候还是用FILE控件的名称来取的。

方法二：（支持所有浏览器）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>upload</title>

#local_firmware{

position: absolute;

left: 0;

left: 8px\9;

top: 38px;

filter: alpha(opacity = 0); /*IE*/

-moz-opacity:0; /*Mozilla*/

opacity: 0;

}

</style>

</head>

<body>

<h3 style="color:blue;">将上传file标签的中文"浏览"换成英文"Brower"或图片:</h3>

<tbody>

<tr>

</tr>

</tbody>

</table>

</form>

</div>

</body>

思路：就是用一个文本框和一个按钮模枋file标签，并将一个真正的file标签（和模枋的等大小）设为全透明并覆盖在模枋的上面，这样显示的就是模枋的标签，但是点击时实际是点击到真正file标签上

只修改input file组件的浏览按钮样式

input(file)浏览按钮美化

做美工的都知道不同浏览器的浏览按钮（input type=file）样式有所不同，尤其是谷歌，与其他浏览器的几乎没有相同的地方。这个浏览按钮我们几乎是控制不了它的样式的。下面我来分享一下我的美化方法。

首先我们先要了解一下各浏览器的浏览按钮的共同特性：

1、都可以设置整体的宽度和高度，但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度；

2、谷歌中只要是input的区域单击可弹出窗口；IE（IE6中没试）中，单击浏览按钮可以弹出窗口，双击文本框区域可以弹出窗口；火狐和Opera中，单击input任何区域都可以弹出窗口；

3、设置input字体大小，IE、火狐、Opera的流量按钮都变大了（宽与高）。（这点很重要）；

从上面的共同特性来看，只要第三条是我们最需要的。

现在我们可以开始美化了：

思路：先用a标签做一个按钮，定好宽度并要加上overflow:hidden;属性，然后将<input type="file" />放在a标签里面，通过定位，将input相对于a的右上角对齐，最后将input的透明度设为0即可。

为何要右上角对齐？

之所以右上角对齐是因为在IE、火狐、Opera中，鼠标放在文本框上鼠标呈文本状态，还有一个原因是IE中在文本区域中需要双击才能弹出窗口，这也是我利用上面提到的共同特性的第三点的原因。

示例代码如下：

 
         < 
         style 
         > 
        
         a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;} 
        
         a:hover{background:green;} 
        
         input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);} 
        
         </ 
         style 
         > 
        
         < 
         a  
         href 
         = 
         "#" 
         > 
        
         < 
         input  
         type 
         = 
         "file"  
         value 
         = 
         "浏览"  
         /> 
        
         </ 
         a 
         >