传统的表单控件十分简陋,可以说是很难看,那怎么办?
方法:我们自己做一个好看的样式出来,用各种标签啊,css啊,是可以做到的。如图:
做出这样一个样子应该是很简单的,但是怎么让他具有上传的功能的呢?
那就使用代理的方法,点击上传就等于点击<input type="file">(上传文件表单控件)
废话不多说,直接上代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试插件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<style>
body{font-family:"微软雅黑";font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align="center">上传图片预览</h1>
<br><br>
<div class="wrapper">
<input type="file">
</div>
<script src="js/upload.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试插件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<style>
body{font-family:"微软雅黑";font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align="center">上传图片预览</h1>
<br><br>
<div class="wrapper">
<input type="file">
</div>
<script src="js/upload.js"></script>
</body>
</html>
css:
.file{
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}
.file img{
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}