當我在輸入文件中插入文件時，它顯示預覽，但如何刪除選定的文件？

Question

我得到這個JavaScript顯示圖像預覽時，用戶選擇文件，它工作。
案例：
- 如果用戶選擇錯誤的圖像並刪除它，則預覽不會刷新爲'空'。
我不知道我該如何做到這一點，已經看過谷歌和stackoverflow和什麼都沒有。有人可以給我點光嗎？

<img id="image1" width="300px" height="300px"/> 
<img id="image2" width="300px" height="300px"/> 
<img id="image3" width="300px" height="300px"/> 
<img id="image4" width="300px" height="300px"/> 

<script> 
    document.getElementById("productimage1").onchange = function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       document.getElementById("image1").src = e.target.result; 
      }; 
      reader.readAsDataURL(this.files[0]); 
     }; 
    document.getElementById("productimage2").onchange = function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       document.getElementById("image2").src = e.target.result; 
      }; 
      reader.readAsDataURL(this.files[0]); 
     }; 
    document.getElementById("productimage3").onchange = function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       document.getElementById("image3").src = e.target.result; 
      }; 
      reader.readAsDataURL(this.files[0]); 
     }; 
    document.getElementById("productimage4").onchange = function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       document.getElementById("image4").src = e.target.result; 
      }; 
      reader.readAsDataURL(this.files[0]); 
     }; 
</script> 

Answer 1

如果我得到你想要什麼正確...

想要的圖像預覽當用戶試圖通過選擇「打開文件的新形象被清除「窗口。沒有刪除按鈕。

這裏是你應該做的，那麼：在CodePen

---

---編輯

這裏

// A delete function 
$("[id^='product']").on("click",function(){ 

    // This clears the input value. 
    $(this).val(""); 

    // This resets the preview. 
    var imageID = $(this).attr("id").substr(7); 
    $("#"+imageID).attr("src","https://placehold.it/300x300"); 
}); 

看到的是完整的代碼優化。

// A delete function 
$("[id^='product']").on("click",function(){ 

    // This clears the input value. 
    $(this).val(""); 

    // This resets the preview. 
    var imageID = $(this).attr("id").substr(7); 
    $("#"+imageID).attr("src","https://placehold.it/300x300"); 
}); 


// The preview function 
$("[id^='product']").on("change",function(){ 
    var imageID = $(this).attr("id").substr(7); 

    // Displays a preview im the right div 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
    $("#"+imageID).attr("src",e.target.result); 
    }; 
    reader.readAsDataURL(this.files[0]); 
}); 

見CodePen - version #2