下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<link href="skins/default/contextmenu.css" rel="stylesheet">
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/contextmenu.js" type="text/javascript"></script>
<style>
html{
font-family:'微软雅黑';
font-size:12px;
}
form{position: relative;}
.file{opacity:0;background:green;width:230px}
input,button{position: absolute;}
.upload{top:0px;left:180px;}
.fake{width:170px;disabled:disabled;}
</style>
</head>
<body>
<!-- 版本1 -->
<p>以下两个版本，在禁用js后会丧失部分功能，但是还是能实现上传功能。再处理下就可以兼容低版本ie了（我未处理）。</p>
版本1：透明的file输入框盖住了一个普通的输入框和一个按钮
<form id="version_1" enctype="multipart/form-data">
<input class="fake" type="text" disabled="disabled" name="txt"/>
<button class="upload" name="file">浏览1</button>
<input class="file" type="file" onchange="txt.value=this.value"/>
</form>
<br/><br/><br/>
<!-- 版本2 -->
版本2：透明的file输入框盖住了一个普通输入框，假的浏览按钮在file输入框上部（为了响应鼠标的事件，比如说hover，这样漂亮点）
<form id="version_2" enctype="multipart/form-data">
<input class="fake" type="text" disabled="disabled" name="txt" onclick="file.click();"/>
<input class="file" type="file" name="file" onchange="txt.value=this.value"/>
<button type="button" class="upload" onclick="file.click();">浏览2</button>
</form>
</body>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
