点击按钮时，文件Api应删除预览

Question

我正在尝试建立一个文件上传，希望在点击灰色"后清除预览；清除内容"；按钮(德语(。file input元素清空自身，但预览不会更新自身。

这是我的代码：

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), '" style=" height: 100px; max-width: 150px; border: 1px solid #000; margin: 10px 5px 0 0;"/>'].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);

我的HTML模式从Bootstrap 5

<div class="form-check">
<div class="input-group">
<!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
<button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fas fa-upload fa-2x"></i>
<!--Dokumente hochladen-->
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value=""/>
<output id="list"></output>
<small>
<strong>
<br>
Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
</strong>
</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
<button type="button" id="clearFiles">Inhalte löschen</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</div>
</div>

以及它现在的样子示例图像

Answer 1

我为Inhalte löschen按钮添加了一个事件侦听器：

// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
document.querySelector("#list").innerHTML = "";
});

请注意，我还将.insertBefore(span, null);改为.append(span)。因此，现在图像被附加到#listdiv中，而不是在它之前。这使得清除#list的全部内容变得更容易。

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 or PDF files.
if (!f.type.match('image.*') && !f.type.match('pdf')) {
console.log(f.type)
continue;
}

// A flag to know if the file is an image or a PDF
let source_is_image = true;
if(!f.type.match('image.*')){
source_is_image = false;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');

// Based on the flag, decide to use the image or the PDF logo
var file = source_is_image ? e.target.result : "https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg";

span.innerHTML = ['<img class="thumb" src="', file, '" title="', escape(theFile.name), '"/>'
].join('');
document.getElementById('list').append(span);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
document.querySelector("#list").innerHTML = "";
});

/* This can be in the CSS instead of inline style */
.thumb{
height: 100px;
max-width: 150px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}

<div class="form-check">
<div class="input-group">
<!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
<button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fas fa-upload fa-2x"></i>
<!--Dokumente hochladen-->
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value="" />
<output id="list"></output>
<small>
<strong>
<br>
Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
</strong>
</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
<button type="button" id="clearFiles">Inhalte löschen</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
</div>
</div>