拖放上传 - 从输入中删除对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖放上传 - 从输入中删除对象相关的知识，希望对你有一定的参考价值。
我正在尝试创建拖放上传文件。一切正常，唯一的问题是从列表中删除单个文件。我希望在单击DELETE后，文件将从列表中删除，文件浏览器将不再标记该文件。
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>答案
检查此代码段。单击后，文件和按钮被删除。我用jQuery来解决这个问题。
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);
$(document).on('click', '.upload-file span', function(){
$('#files').val("");
$(this).closest('.upload-file').remove();
});.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;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div class="space">
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
</div>另一答案
您需要将click事件附加到span并在该特定事件上删除父节点本身
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>以上是关于拖放上传 - 从输入中删除对象的主要内容，如果未能解决你的问题，请参考以下文章