Question

我正在上传多张图片并通过制作缩略图进行预览。当我重新上传图像时，之前的图像也在那里。如何在上传新图像时清除以前的图像。

我的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传递为空：脚本：

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

上传新图片时清晰的缩略图？

1 个答案: