javascript - 通过单击删除照片
问题描述
我有一个将照片添加到页面的功能。她可以添加多张照片。如何做到这一点,通过点击一张照片,它是被点击删除的那张?请告诉我。
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
解决方案
这是否满足您的目标?
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
// I added this line
document.getElementById('list').addEventListener('click', (evt) => {
evt.target.parentNode.removeChild(evt.target);
});
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
推荐阅读
- javascript - chrome devtools 在调试时不再显示内联变量
- ios - 未找到 Unity iOS 项目“FBSDKShareKit/FBSDKShareKit.h”文件
- c# - C#在windows窗体内运行外部exe
- mysql - 尝试进行 LEFT JOIN,但结果为空
- oracle - 使用oracle程序读取和存储目录中的所有文件
- c# - 首先从控制器获取数据,然后如何将其发回?asp.net核心mvc
- php - 从数据库中添加产品页面列表类别
- visual-studio - 是否可以在 Visual Studio 或其他 IDE 中进行设置?
- php - 用于检测 rar 文件完成 (*.r01) 的 PHP 函数不适用于 *.s01
- timer - Arduino Mega 2560 定时器中断