<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.1.1.min.js"></script>
<style>
.a_wrap{
float: left;
position: relative;
cursor: pointer;
}
.delImg{
position: absolute;
color: #f00;
margin: 0 0 0 60px;
font-size: 10px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
vertical-align: middle;
background-color: #c3c3c3;
}
#imgs{
margin-top: 10px;
}
img{
width: 80px;
height: 80px;
margin-right: 10px;
}
/* #showImg{
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.2)
}
#bigImg{
width: 200px;
height: 200px;
} */
</style>
</head>
<body>
<input type="file" name="uploadfile" id="uploadfile" multiple="multiple" accept=".jpg,.jpeg">
<div id="imgs"></div>
<!-- <div style="display:none" id="showImg" onclick="showImg()"><img src='' id="bigImg"></div> -->
<script>
function delImage(obj,a){
obj.parentNode.parentNode.removeChild(obj.parentNode); //删除图片
console.log(obj)
console.log(a)
}
// function bigImg(obj){//图片放大显示
// $("#bigImg").attr('src',obj.src)
// $("#showImg").css('display','block')
// }
// function showImg(){ //图片消失
// $("#showImg").css('display','none')
// }
$('#uploadfile').change(function(){
var $file = $(this);
var fileObj = $file[0];//可能选多张图片
var windowURL = window.URL || window.webkitURL;
var dataURL;
var imgsHtml = '';
if (fileObj && fileObj.files && fileObj.files[0]) {
for (var index = 0; index < fileObj.files.length; index++) {
imgsHtml += "<div class = 'a_wrap'><div class='delImg' onclick='delImage(this,"+index+")'>×</div>"+"<a href="+windowURL.createObjectURL(fileObj.files[index])+" target='view_window' class='_image_a'><img src ="+windowURL.createObjectURL(fileObj.files[index])+"></a></div>"
}
$("#imgs").html(imgsHtml);
}
});
</script>
</body>
</html>
上传图片预览
最新推荐文章于 2022-07-07 16:16:13 发布