`
齐晓威_518
  • 浏览: 606837 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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

 
阅读更多

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

方法一：（仅支持IE）

 <HTML>   

  <HEAD>   

  <TITLE>   New   Document   </TITLE>   

  <META   NAME="Generator"   CONTENT="EditPlus">   

  <META   NAME="Author"   CONTENT="">   

  <META   NAME="Keywords"   CONTENT="">   

  <META   NAME="Description"   CONTENT="">   

  <SCRIPT   LANGUAGE="JavaScript">   

  <!--   

  function   test1(){   

  form1.fileABC.click();   

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

  }   

  //-->   

  </SCRIPT>   

  </HEAD>   

    

  <form   name="form1"   method="post"   action="">   

  <input   name="fileABC"   type="file"   style="display:none">   

  <input   type="text"   name="textfield"   readonly="">   

  <input   type="image"   src="xxx.jpg"   onclick="test1()">   

  </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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Pragma" content="No-cache" />

<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />

<meta http-equiv="Expires" content="-1" />

<title>upload</title>

<style type="text/css">

#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>

<div style="margin:0; padding:0; position:relative">

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

<form action="cgi-bin/webupg" method="post" enctype="multipart/form-data">

<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table01">

<tbody>

<tr>

<td nowrap=""><input type="file" name="firmware" id="local_firmware" value="browse" maxlength="128" style="height:26px;" size="40" onchange="document.getElementById('text_path').value=this.value;" hidefocus="hidefocus"/></td>

<td nowrap=""><input type="text"  id="text_path" name="text_path" style="width:260px;" value="" maxlength="128"  readonly/><input type="button"  id="file_button" value="browse..." />&nbsp;&nbsp;&nbsp;<input type="submit" value="Upload" onClick="" id="Upload"/></td>

</tr>

</tbody>

</table>

<input type="hidden" name="act" id="update" value="Update_Firmware" />

</form>

</div>

</body>

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

 

 

 

 

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

<style type="text/css">  
<!--  
#input1{border:1px solid #0000FF}  
#btn1{width:70px;height:21px;font-size:12px;padding-top:3px;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-right:1px solid #666666;border-bottom:1px solid #666666}  
//-->  
</style>  
<input type="text" id="input1"> <input type="button" id="btn1" onclick="myfile.click();" value="浏览文档">  
<input type="file" id="myfile" onchange="input1.value=this.value" style="display:none"> 

 

 

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中在文本区域中需要双击才能弹出窗口，这也是我利用上面提到的共同特性的第三点的原因。

        示例代码如下：

1
2
3
4
5
6
7
8
9
<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>

这样各个浏览器的input浏览按钮的样式就达到了一致的效果，file按钮样式美化搞定。

分享到：
| jquery操作表格(添加/删除行、添加/删除 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    70款经典Dreamweaver插件

    CloseCW 方便的插入一个关闭当前页面的按钮，可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent Dreamweaver 插件文件名 Dreamweaver 插件简介 floatimg 在页面上制作的...

    Dreamweaver 插件集

    方便的插入一个关闭当前页面的按钮，可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent floatimg 在页面上制作的飘浮图片插件,没时间封装 mmJIK Macromedia亲自为...

    delphi 开发经验技巧宝典源码

    0120　使用StrToInt函数将字符串转换成整数　81 0121　使用StrToBool函数将字符串转换为布尔类型　81 4.6　对话框函数　81 0122　使用InputBox函数显示输入对话框　81 0123　使用MessageDlg函数显示不同风格的对话框...

    delphi 开发经验技巧宝典源码06

    0120　使用StrToInt函数将字符串转换成整数　81 0121　使用StrToBool函数将字符串转换为布尔类型　81 4.6　对话框函数　81 0122　使用InputBox函数显示输入对话框　81 0123　使用MessageDlg函数显示不同风格的对话框...

    fckedit编辑器

    出现错误的地方是在：点插入图片，点Browse按钮的时候： XML request error: Internel Server Error(500) 找资料：http://lamono.javaeye.com/blog/49135 拷贝xalan.jar和serialize.jar到/WEB-INF/lib，问题解决...

    网管教程 从入门到精通软件篇.txt

    如果系统检测到无效或非标准分区表标记，将提示用户是否继续执行该命令。除非您访问驱动器有问题，否则不要继续进行。向系统分区写入新的主引导记录可能破坏分区表并导致分区无法访问。 　format 　将指定的驱动器...

    C#全能速查宝典

    《C#全能速查宝典》共分为8章，分别介绍了C#语言基础、Windows窗体及常用控件、Windows高级控件、控件公共属性、方法及事件、数据库开发、文件、数据流与注册表、GDI+绘图技术和C#高级编程，共包含562个C#编程中常用...

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    上面的例子分三级结构排列成"树"状，其中的就是根元素。在XML和DTD文件中，第一个定义的都是根元素。 3.Parent Element(父元素)/Child Element(子元素) 父元素是指包含有其它元素的元素，被包含的元素称为它的子...

Magicbox
Global site tag (gtag.js) - Google Analytics