我尝试使用 javascript 制作上传图像文件功能,但我遇到了一些问题,当我删除(单击"X"(第一张图像并尝试重新上传另一张图像时,它将带有两个相同的图像,即它应该只出现一个,我需要只用 javascript 完成它,没有任何库, 这是我下面的代码。
var container = document.querySelector('.image_container');
function upload(id,imageBox, deleteBtn){
var inputTarget = document.getElementById(id);
var imageBox = document.getElementById(imageBox);
var deleteBtn = document.getElementById(deleteBtn);
var imagePrev = document.createElement('img');
inputTarget.addEventListener('change', function({target}){
var file = target.files[0];
var reader = new FileReader();
reader.onload = function(e){
deleteBtn.style.display = 'block';
imageBox.style.display = 'none';
imagePrev.src = e.target.result;
imagePrev.className = id;
container.appendChild(imagePrev);
};
reader.readAsDataURL(file);
});
}
function deleteImg(id,imageBox,btnId){
var targetInput = document.getElementById(id);
var imageBox = document.getElementById(imageBox);
var imagePrev = document.querySelector('.'+id);
var deleteBtn = document.querySelector('#'+btnId);
imageBox.style.display = 'block';
targetInput.value = "";
deleteBtn.style.display = 'none';
container.removeChild(imagePrev);
}
.image_container input[type="file"] {
display: none;
}
.image_container #image_area1 {
width: 100px;
height: 100px;
cursor: pointer;
text-align: center;
display: inline-block;
line-height: 90px;
background: rgb(211, 211, 211);
border-radius: 3px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.image_container {
display: inline-block;
}
button {
display: block;
margin: 20px 0;
}
#close_button {
background: white;
border-radius: 50px;
width: 21px;
height: 21px;
text-align: center;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div class="image_container">
<label>
<input
type="file"
class="upload_button-first"
id="target1"
onclick="upload('target1','image_area1', 'close_button')">
<span id="image_area1">upload image</span>
</label>
<div id="close_button" onclick="deleteImg('target1','image_area1','close_button')">x</div>
</div>
</body>
</html>
您应该注册一次性事件,否则该事件将在您添加n
图像时调用n
次。
var handler = function(target) {
var file = target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
deleteBtn.style.display = 'block';
imageBox.style.display = 'none';
imagePrev.src = e.target.result;
imagePrev.className = id;
container.appendChild(imagePrev);
};
reader.readAsDataURL(file);
inputTarget.removeEventListener('change', handler);
};
inputTarget.addEventListener('change', handler);