上載新圖片的清晰縮略圖圖像？

我上傳多張圖片並通過製作縮略圖進行預覽。當我重新上傳圖片時，以前的圖片也在此處顯示。如何在上傳新圖片時清除以前的圖片。上載新圖片的清晰縮略圖圖像？

我的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

上載新圖片的清晰縮略圖圖像？

回答

相關問題