<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no"/>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<title></title>
<style>
ul ,li{
list-style: none;
padding: 0;margin: 0;
background-color: #fff;
}
p{
margin: 0;
padding: 0;
}
#box{
width: 100%;
height: auto;
}
.img-d{
margin-top: 30px;
width: 60px;
height: 60px;
text-align: center;
position: relative;
border: 1px solid #666666;
display: inline-block;
}
.img-d span{
display: inline-block;
width: 100%;
height: 100% ;
cursor: pointer;
background: url(http://qqbxw.b0.upaiyun.com/static/imgs/jia_03.png) no-repeat 17px 17px ;
}
#up{
display: none;
}
.tu{
position: relative;
display: inline-block;
margin-right: 12px;
}
.tu2{
display: inline-block;
width: 20px;
height: 20px;
font-size: 17px;
position: absolute;
top: -0px;
right: -0px;
color: #ffffff;
text-align: center;
line-height: 25px;
cursor: pointer;
background: url('timg.jpg') no-repeat;
background-size: cover;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="main">
<ul id="box">
<li class="img-d">
<span class="up-s" ></span>
<input type="file" id="up" multiple name="files">
</li>
</ul>
</div>
<div style="text-align: center;width: 100%;margin-top: 20%">
<input type="submit" style="float: none;width: 70%;height: 40px;background-color: #FF7E00;color: #ffffff;border-radius: 5px;border: none;"/>
</div>
<script>
// span的点击事件
var addBtn = document.querySelector('.up-s');
addBtn.addEventListener('click',function () {
document.querySelector('#up').value = null;
document.querySelector('#up').click();
return false;
},false);
// 处理input点击之后的change事件
document.getElementById("up").addEventListener("change",function(e){
var files =this.files;
var reader =new FileReader();
reader.readAsDataURL(files[0]);
reader.onload =function(e){
var dx =(e.total/1024)/1024;
if(dx>=2){
alert("文件大小大于2M");
return;
}
var result =this.result;//这里就是转化之后的DataURL
$('.img-d').before("<div class='tu'><img src="+result+" class='tu1' width='60px' height='60px'><i class='tu2'></i><div>");
//单选框--为谁买保险
$(".tu2").click(function() {
$(this).parent().remove();
})
};
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
</html>
