浏览按钮换成图片

自己放个图片写上onclick 事件就行了

css里面把按钮的border设为0，然后加上background-image

- - 楼上全答非所问
别人是问的<input 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=utf-8" />
<title>无标题文档</title>
<script>
function $(id){
return document.getElementById(id);
}
</script>
<style>
#file_id{ position:absolute; z-index:12; filter:alpha(opacity:0); opacity:0;}
</style>
</head>
<body>
<input type="file" id="file_id" onchange="$('txt_id').value=this.value" />
<input type="text" id="txt_id" value="这是假的！" />
<input type="button" id="btn_id" value="假浏览" />
</body>
</html>
可以试试这个效果不好就是

http://topic.csdn.net/u/20100809/14/7afb264a-d676-4b4c-803d-c752a962fe19.html

你们上面的方法都不行，这个我已经弄出来了。就是把图片定位到那个浏览按钮上面。源码给你们贴上哦。希望对大家以后有帮助。
<form name="upform" method="post" enctype="multipart/form-data"
action="/TProxy/uploadNewFile.do?o=uploadNewFile">
<TABLE width="98%" border="0" align="center" cellPadding="0"
cellSpacing="0" class="fb_add">
<TR>
<TD class="fb_add_title" colspan="6">
上传文件
</TD>
</TR>
<TR>
<TD align="left" class="fb_add_content" valign="bottom"
height="30">
<div
style="position: relative; top: 0px; l eft: 0px; width: 640px; height: 30px;">
<input type="file" id="file" name="myFile"
onchange="document.upform.pesudo.value=this.value;"
style="display: block; position: absolute; top: 0px; left: 0px; filter: alpha(opacity : 0); opacity: 0; z-index: 1; cursor: pointer;" />
<div
style="position: absolute; top: 0px; left: 0px; cursor: pointer; z-index: 0;">
<input type="text" name="pesudo" style="float: left;" />
<input type="image" value="浏览" src=images/scan.gif
style="width: 62px; height: 24px; border: 0px" alt="Submit" />
<input type="image" value="上传" src="images/uploading.gif"
style="border: 0px;" alt="Submit" />
</div>
</div>
</TD>
</TR>
<TR class="fb_add_bottom">
<TD colspan="6">
<DIV align="center">
上传文件
</DIV>
</TD>
</TR>
</TABLE>
</form>

谢谢楼主分享。
实现方法多种多样，道理都一样，间接地去用file类型的input，既然file类型input无法设置背景，那就用能设置背景的按钮来过渡一下。
---------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面</title>
<script type="text/javascript">

</script>
<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>
</head> <body>
<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">
</body>
</html>

设置背景也是可以的，但是设置背景还是没有更改图片漂亮。所以最好的就是我分享的那个源码。
我这里也有一个可以设置背景的，效果确实是不怎么好看，也给大家分享一下。
<!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=utf-8" />
<title>测试上传文件</title>
<style type="text/css">
* {font-size:12px;margin:0;}
body {background:#fff;}
form {margin:12px;}
input.file{
    vertical-align:middle;
    position:relative;
    left:-218px;
    filter:alpha(opacity=0);
    opacity:0;
z-index:1;
*width:223px;
}
form input.viewfile {
z-index:99;
border:1px solid #ccc;
padding:2px;
width:150px;
vertical-align:middle;
color:#999;
}
form p span {
float:left;
}
form label.bottom {
border:1px solid #38597a;
background-color:#FF6600;
background-image:url(english.gif)
color:#fff;
height:19px;
line-height:19px;
display:block;
width:60px;
text-align:center;
cursor:pointer;
float:left;
position:relative;
*top:1px;
}
form input.submit {
border:0;
background:#380;
width:70px;
height:22px;
line-height:22px;
color:#fff;
cursor:pointer;
}
p.clear {
clear:left;
margin-top:12px;
}
</style>
</head>
<body>
<form action="" method="post" name="upfiles" enctype="multipart/form-data">
<p>
<span>
<label for="viewfile">上传文件：</label>
<input type="text" name="viewfile" id="viewfile" class="viewfile" />
</span>
<label for="upload" class="bottom">查找文件</label><input type="file" size="27" name="upload" onchange="document.getElementById('viewfile').value=this.value;" class="file" />
</p>
<p class="clear"><input class="submit" type="submit" value="确定上传" /></p>
</form>
</body>
</html>

调试易

浏览按钮换成图片

解决方案 »