我想在每个缩略图旁边放一个小叉,以便能够将它们一个一个地删除。我可以通过单击来删除图像,但我希望有单独的按钮“x”来删除它。
fileInput.addEventListener("change", function (e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
var file = files[0]
var image = document.createElement("img");
var thumbnail = document.getElementById("thumbnail");
image.file = file;
image.setAttribute('class', 'imgKLIK5');
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload = function () {
ctx.drawImage(image, 100, 100);
}
}
});
这是我在 JFIDDLE 中的代码
你能帮帮我吗?
最佳答案
查看带有关闭按钮的示例:http://jsfiddle.net/kevalbhatt18/r0taz01L/1/
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
我在您的 showThumbnail 函数中进行了此更改
function showThumbnail(files) {
var file = files[0]
var thumbnail = document.getElementById("thumbnail");
var pDiv = document.createElement("div");
var image = document.createElement("img");
var div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
image.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(image)
div.innerHTML = "X";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div).......
...................
关于javascript - 为每个图像缩略图预览添加删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31287680/