我正在上传多张图片并通过制作缩略图进行预览。当我重新上传图片时，之前的图片也在那里。如何在上传新图片时清除之前的图片。
我的 html:-
<div>
<input type="file" id="files" multiple name="media" accept="image/*" />
<output id="list"></output>
</div>
我制作缩略图的脚本:-
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, validatedfiles,f; f = files[i],validatedfiles = files[i]; i++) {
if (i > 3) {
break;
}
// alert (f.name);
var reader = new FileReader();
var imagearray = [];
imagearray = files[i];
// alert ( imagearray);
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
span.innerHTML = ['<img class="thumbs_image" src="',e.target.result,'" title="', escape (theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
span.children[1].addEventListener("click", function (event) {
span.parentNode.removeChild(span);
})(imagearray);
// Read in the image file as a data URL.
reader.readAsDataURL(imagearray);
}
}
最佳答案
html :-
<div>
<input type="file" id="files" multiple name="media" accept="image/*" />
<output id="list"></output>
</div>
我将在脚本中将输出的 ID 作为空传递: 脚本:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, validatedfiles,f; f = files[i],validatedfiles = files[i]; i++) {
$("#list").html("");
if (i > 3) {
break;
}
// alert (f.name);
var reader = new FileReader();
var imagearray = [];
imagearray = files[i];
// alert ( imagearray);
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
span.innerHTML = ['<img class="thumbs_image" src="',e.target.result,'" title="', escape (theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
span.children[1].addEventListener("click", function (event) {
span.parentNode.removeChild(span);
})(imagearray);
// Read in the image file as a data URL.
reader.readAsDataURL(imagearray);
}
}
关于javascript - 上传新图片时清除缩略图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43494344/