修改默认上传文件样式

最新推荐文章于 2022-12-19 10:54:53 发布

bymyself11

最新推荐文章于 2022-12-19 10:54:53 发布

阅读量421

点赞数

分类专栏：使用知识及遇到的问题

本文链接：https://blog.csdn.net/bymyself11/article/details/54016465

版权

使用知识及遇到的问题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>修改自定义上传按钮样式</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
	* {
		margin:0;
		padding:0;
	}
	body {
		font:14px Verdana, Arial, Geneva, sans-serif;
		color:#404040;
		background:#f9f9f9;
	}
	.main{
		width:300px;
		height:60px;
		position:absolute;
	}
	.box{
		position:relative;
		float:left;
	}
	input.uploadFile{
		position:absolute;
		right:0px;
		top:0px;
		opacity:0;
		filter:alpha(opacity=0);
		cursor:pointer;
		width:276px;
		height:36px;
		overflow: hidden;
	}
	input.textbox{
		float:left;
		padding:5px;
		color:#999;
		height:24px;
		line-height:24px;
		border:1px #ccc solid;
		width:200px;
		margin-right:4px;
	}
	a.link{
		float:left;
		display:inline-block;
		padding:4px 16px;
		color:#fff;
		font:14px;
		cursor:pointer;
		background-color:#3adade;
		line-height:28px;
		text-decoration:none;
	}
</style>
</head>

<body>
	<div class="main">
        <div class="box">
            <input type="text" name="copyFile"  class="textbox" />
            <a href="javascript:void(0);"  class="link">浏览</a>
            <input type="file" class="uploadFile" name="upload" οnchange="getFile(this,'copyFile')"/>
        </div>
        <script type="text/javascript">
			function getFile(obj,inputName){
				var file_name = $(obj).val();
				$("input[name='"+inputName+"']").val(file_name);
			}
        </script>
    </div>
</body>
</html>

bymyself11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
修改默认上传文件样式

修改自定义上传按钮样式 * { margin:0; padding:0; } body { font:14px Verdana, Arial, Geneva, sans-serif; color:#404040; background:#f9f9f9; } .main{ width:300px; height:60px; position:absolu
复制链接

扫一扫

专栏目录