`
齐晓威_518
  • 浏览: 618059 次
  • 性别: 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操作表格(添加/删除行、添加/删除 ...
评论
发表评论

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

相关推荐

    input type=file 显示的浏览 改成英文

    这将在鼠标悬停时显示“Choose a file”的提示，但“浏览”按钮的文字仍然会保持为操作系统的默认语言。 2. **CSS伪元素和JavaScript：** 由于浏览器的限制，我们无法直接改变“浏览”按钮的文字，但可以使用CSS...

    如何将input type=file显示的浏览变成英文的

    -- 自定义的浏览按钮 --&gt; ()"&gt; ``` #### 总结 通过上述步骤，我们可以轻松地将`&lt;input type="file"&gt;`的默认“浏览”按钮替换为英文的“Browse”，并且将选中的文件路径显示在一个自定义的文本输入框中。这对于...

    70款经典Dreamweaver插件

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

    Dreamweaver 插件集

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

    语料库检索软件WordSmith

    Splitter工具允许用户将大型文本文件分割成更小的片段，便于管理和分析。 ##### 5. TextConverter - 文本替换工具 TextConverter工具提供了一种便捷的方法来转换文本格式，使其更适合特定的分析需求。 ##### 6. ...

    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函数显示不同风格的对话框...

    数据仓库 工具kettle

    - **拆分字符串（SplitString）**：将字符串拆分成多个字段。 以上内容覆盖了Kettle的基础概念、安装配置、核心组件以及使用技巧等方面的知识点，希望能帮助读者更好地理解和掌握Kettle这一强大的数据集成工具。

    计算机软件专业必备英语词汇

    程序可以由一种或多种编程语言编写而成。 #### 5. **line** - 在计算机科学中，行通常指代码中的一行或数据中的单行记录。 - 线路，指的是网络连接或信号传输路径等。 #### 6. **if** - 条件语句的关键字，用于...

    java反编译工具，读取打包后的jar代码

    4. **浏览源代码**：一旦JAR文件加载成功，你可以通过类名或包名的树形结构来浏览源代码。点击任意一个类，其源代码将在右侧窗口显示出来。 5. **查看与分析**：JD-GUI不仅显示源代码，还可以进行搜索、复制和导航...

    webfm_java_jsp_

    例如，一个`&lt;form&gt;`标签可以用于文件上传，其中包含`&lt;input type="file"&gt;`元素让用户选择本地文件；而一个`&lt;button&gt;`则可能触发删除或重命名操作，通过JavaScript或者AJAX发送异步请求到服务器。 Java后端接收这些...

    chm制作手册.pdf

    5. 编译：通过【Compiled HTML file】按钮，将HTML文件编译成CHM文件。 6. 测试：使用【Test】菜单中的功能预览和测试编译后的文件，确保所有链接和功能正常工作。 对于旧版本的Windows系统（如Windows 95），可能...

    fckedit编辑器

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

    2021-2022计算机二级等级考试试题及答案No.4769.docx

    这些题目涉及了计算机二级等级考试中的多个知识点，包括网络基础、编程语言、数据库管理、操作系统、软件应用以及Web服务等。下面是对这些知识点的详细说明： 1. FTP（文件传输协议）在Internet中主要用于上载和...

    网页制作测试题.docx

    2. **网页打开方式**：在Dreamweaver中，设置网页打开方式时，选择能在上一级浏览窗口显示超链接的选项，通常是`_parent`或`_top`。 3. **表格间距**：插入表格时，“间距”指的是单元格之间的距离，影响表格的整体...

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

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

    程序员英语词汇

    打印，印刷): 打印是指将电子文档转换成物理副本的过程。 36. **return** (v. 返回，回送): 返回通常是指从一个函数返回结果或将控制权交还给调用者的过程。 37. **number** (n. 数字，号码；vt. 编号): 数字是用于...

    助理电子商务师模拟理论试题二.doc

    16. ASP脚本语言：ASP（Active Server Pages）默认使用VBScript作为脚本语言。 17. FTP功能：FTP（File Transfer Protocol）主要功能是下载和上传文件。 18. 对等网络通信：在对等网络中，计算机可以通过超终端...

    C#全能速查宝典

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

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