javascript - 拖放上传 - 从输入中删除对象
问题描述
我正在尝试创建一个拖放上传文件。一切正常,唯一的问题是从列表中删除单个文件。我希望单击删除后,该文件将从列表中删除,并且文件资源管理器将不再标记该文件。
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var div = document.createElement('div');
div.className = "upload-file";
div.innerHTML = ['<span>[DELETE]</span> ', escape(theFile.name)].join('');
document.getElementById('list').insertBefore(div, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.space {
border: 2px solid darkorange;
width: 300px;
}
.upload-file {
display: inline-block;
background-color: #012345;
color: #fff;
border-radius: 20px;
padding: 4px 10px;
margin: 5px;
}
span {
color: red;
font-weight: 700;
cursor: pointer;
}
<div class="space">
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
</div>
解决方案
您需要将单击事件附加到跨度并在该特定事件上删除父节点本身
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var div = document.createElement('div');
div.className = "upload-file";
div.innerHTML = ['<span onclick="deleteit(event)" >[DELETE]</span> ', escape(theFile.name)].join('');
document.getElementById('list').insertBefore(div, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.space {
border: 2px solid darkorange;
width: 300px;
}
.upload-file {
display: inline-block;
background-color: #012345;
color: #fff;
border-radius: 20px;
padding: 4px 10px;
margin: 5px;
}
span {
color: red;
font-weight: 700;
cursor: pointer;
}
<div class="space">
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
</div>
<script>
function deleteit(event) { event.target.parentNode.parentNode.removeChild(event.target.parentNode);
}
</script>
希望这可以帮助 :)
推荐阅读
- azure - 将存储帐户 datalake 2 连接到日志分析工作区
- android - 单对象领域更改侦听器
- python - 使用循环或 lambda 在多个数据帧中添加具有相同字符串值的列的更有效方法?
- python - 线性回归的无穷大值误差
- swift - 如何在 do-catch 块之前初始化结构
- javascript - 如何在 node.js ES5 中分解多个文件中的方法链接以进行模块化?
- python - 在 Azure 上运行 Python 代码所需的 CPU 和 RAM
- javascript - 如何将 marklogic 文档复制到 unix 主机位置
- snowflake-cloud-data-platform - 如何跨列查找和计算唯一值?
- google-apps-script - 如果 Google Script 的“我的执行”显示脚本未在指定时间内运行,如何获得通知