下面是编程之家 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)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。