第一种方法：
样式：
HTML:
<div class="fileInput left">
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>
<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>
第二种方法：
<!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>更改文本域的样式-用input模拟文本域</title>
<style>
*{margin:0;padding:0;}
input{border:none;border:1px solid #CCC;vertical-align:middle; }
.input {height:24px; line-height:24px; border-right:none; width:200px;}
.liulan {width:100px;height:26px;background:url(/jscss/demoimg/201206/bgimg.jpg) no-repeat; cursor:pointer;}
.files{ position:absolute; left:202px; top:52px; heigth:26px;cursor:pointer;
filter: Alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
</style>
</head>
<body>
<BR>
<BR>
<BR>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt" class="input"><input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="浏ff览" size="30" onclick="f.click()" class="liulan">
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="height:26px;" class="files" size="1" hidefocus>
</form>
<BR>
<BR>
<BR>
<BR>
</body>
</html>
第三种方法：
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> input{border:1px solid #ff9900;} div {width:300px;position:relative;} p {float:left} .file {position:absolute;top:20px;right:300px;top:0; right:73px;width:0px;height:30px;filter:alpha(opacity=0); -moz-opacity:0;opacity:0;} #txt {height:20px;margin:1px} #ii {width:70px;height:24px;margin-top:1px; margin-top:2px;_margin-top:2px;} </style> |
|
1 2 3 4 5 6 7 8 9 10 |
<div> <form method="post" action="" enctype="multipart/form-data"> <p><input type="text" id="txt" name="txt" /></p> <p><input id="ii" type="button" value="选择文件" /></p> <p><input type="file" onchange="txt.value=this.value" class="file" /> </p> </form> </div> from:http://blog.csdn.net/lijun_xiao2009/article/details/9112771 |