bootstrap 文件上传域美化

最新推荐文章于 2020-01-09 16:40:09 发布

时光·漫步zth

最新推荐文章于 2020-01-09 16:40:09 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端文件上传域美化 bootstrap

本文链接：https://blog.csdn.net/qq_41573234/article/details/90344352

版权

前端专栏收录该内容

36 篇文章 3 订阅

订阅专栏

效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>文件上传域美化</title> 
	<link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

</head> 
<body> 
<div class="container">
	<form class="form-inline" method="post" enctype="multipart/form-data" action="#" >
		<div class="form-group">
		<input type="text" class="form-control" placeholder="请选择上传图片" readonly id="fileName">
		</div>
		<div class="form-group " >
			<div class="form-control"  style="padding: 0px">
				<a href="javascript:;" class="file " style="width: 100%" >选择图片
					<input type="file"  onchange="document.getElementById('fileName').value=this.value"  name="pic">
				</a>
			</div>
		
		</div>
	</form>
</div>
	

</body> 
</html>

时光·漫步zth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 文件上传域美化

效果： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
复制链接

扫一扫