当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » HTML  » 网页设计与交互
分享到: 
收藏 +0
2
美化 type="file" 的 input 输入框
演示: http://runjs.cn/detail/opab0nbm
标签: <无>

代码片段(1) [全屏查看所有代码]

1. [代码][HTML]代码     跳至 [1] [全屏预览]

<!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>


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

开源从代码分享开始 分享代码
水牛叔叔的其它代码 全部(40)...