上传图片 点击按钮删除
Posted zc_boy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上传图片 点击按钮删除相关的知识，希望对你有一定的参考价值。
<!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>
<!-- 不把数字识别为电话号码 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 小图标引用 -->
<title>智保网</title>
<style>
@font-face {
font-family: ‘iconfont‘; /* project id 287608 */
src: url(‘//at.alicdn.com/t/font_bw5ihf2mwsc0izfr.eot‘);
src: url(‘//at.alicdn.com/t/font_bw5ihf2mwsc0izfr.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘//at.alicdn.com/t/font_bw5ihf2mwsc0izfr.woff‘) format(‘woff‘),
url(‘//at.alicdn.com/t/font_bw5ihf2mwsc0izfr.ttf‘) format(‘truetype‘),
url(‘//at.alicdn.com/t/font_bw5ihf2mwsc0izfr.svg#iconfont‘) format(‘svg‘);
}
.iconfont{font-family:"iconfont";font-size:18px;font-style:normal;float: left;padding-left: 20px;color: #7E7E7E}
.iconfont1{font-family:"iconfont";font-size:16px;font-style:normal;float: left;padding-left:2px;padding-right:15px;color: #BFBEC4}
ul ,li{
list-style: none;
padding: 0;margin: 0;
background-color: #fff;
}
p{
margin: 0;
padding: 0;
}
body{
font:1.6rem "微软雅黑",Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F5F5F5;
max-width: 640px;
position: relative;
left: 50%;
transform:translate(-50%,0);
height:100%
}
#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>
以上是关于上传图片 点击按钮删除的主要内容，如果未能解决你的问题，请参考以下文章