将file标签的"浏览"按钮换成别的语言或图片 -

fp_moon

浏览: 983074 次
性别:
来自: 深圳

最近访客更多访客>>

kof98765

gxpcw

elashu

duwu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

将file标签的"浏览"按钮换成别的语言或图片

js css html

如何将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标签上。

分享到：