<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fd-left{float: left;}
.file-relative{position: relative; }
.inputstyle{width: 197px; margin-left: 10px; height: 34px; font-size: 12px;}
.file1{ float: left; margin-left: 10px; width: 67px;z-index:1; height: 34px; border: 1px solid #666666; background-color: #e6e8e7;cursor: pointer; font-size: 14px; line-height: 34px; text-align: center}
.file{ position:absolute; left:10px; top: 0; width:276px; height:34px; cursor: pointer; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div class="file-relative">
<div class="fd-left">
<input name="" type="text" id="viewfile"
onmouseout="document.getElementById('upload').style.display='none';"
class="inputstyle" />
</div>
<label for="unload"
onmouseover="document.getElementById('upload').style.display='block';"
class="file1">浏览
</label>
<input type="file"
onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';"
class="file" id="upload" />
</div>
</body>
</html>
