在上传新图像时清除缩略图图像

Question

我正在上传多个图像，并通过制作缩略图来预览它。当我重新上传时，图像上一个图像时，先前的图像在那里。/p>

我的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);
            }
        }

Answer 1

html： -

<div>
                                        <input type="file" id="files"  multiple name="media" accept="image/*" />
                                        <output id="list"></output>
                                    </div>

我将在脚本中将输出的ID传递为空的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);
            }
        }