首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-10-31 
将file标签的浏览按钮换成别的语言或图片如何将INPUT typefile 的浏览...按钮换成图片呢?? 方法一:(

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

热点排行