When I Insert A File In An Input File It Shows Preview, But How To Delete A Selected File?

I got this javascript to show image preview when user select the file, it is working. Case: - If user select wrong image and delete it then preview do not refresh to 'empty'. I hav

Solution 1:

If I get what you want correctly...

You want the image preview to be cleared when user tries to select a new image using the "open file" window. No delete button.

Here is what you should do then:

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

See in CodePen

---

---EDIT

Here is the full code optimized.

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

See in CodePen - version #2