上载新图片的清晰缩略图图像？

我上传多张图片并通过制作缩略图进行预览。当我重新上传图片时，以前的图片也在此处显示。如何在上传新图片时清除以前的图片。上载新图片的清晰缩略图图像？

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

来源

2017-04-19 Abi Waqas

好吧，你似乎知道如何制作缩略图，你在做什么来删除它们？ –

以及我正在尝试做的是重置我的输出列表以删除它们。可能试试'$（'＃list'）。document.getElementById（'files'）。addEventListener（“click”，function（event）{（'＃list'）。val（“”）; } –

。 html（“”）;'而是。 –

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

来源

2017-04-24 09:47:10

上载新图片的清晰缩略图图像？

回答

相关问题