|
|
如何将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" > </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" id="Upload"/></td></tr></tbody></table><input type="hidden" name="act" id="update" value="Update_Firmware" /></form></div></body> 思路：就是用一个文本框和一个按钮模枋file标签，并将一个真正的file标签（和模枋的等大小）设为全透明并覆盖在模枋的上面，这样显示的就是模枋的标签，但是点击时实际是点击到真正file标签上。 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡