0

I have a html form which is used for uploading file. I can preview images and have delete option from preview itself. However, it isn't deleted from image list which used for uploading the image into server. Please help me to delete the selected image from list

Javascript code:

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(e) {
            var files = e.target.files,
                        filesLength = files.length;

            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<span class=\"pip\">" +
                      "<img class=\"imageThumb\" src=\"" + 
                      e.target.result + "\" title=\"" + file.name + "\"/>" +
                      "<br/><span class=\"remove\">Remove image</span>" +
                      "</span>").insertAfter("#files");

                    $(".remove").click(function(){
                        $(this).parent(".pip").remove();
                    });        
                });

                fileReader.readAsDataURL(f);
            }
        });
    } else{
        alert("Your browser doesn't support to File API")
    }
});
prava
  • 3,916
  • 2
  • 24
  • 35
Tiến Trung
  • 11
  • 5

1 Answers1

0

Change the remove action to this, this will remove all the files

$(".remove").click(function(){
  $(this).parent(".pip").remove()
  $("#files").val('') // this is new
})

you can't remove only one file as e.target.files is read-only.

arc
  • 4,553
  • 5
  • 34
  • 43
  • @TiếnTrung You might find help here: http://stackoverflow.com/a/19236295/3137109, but you will have to make a few bigger changes. You will not be able to use the normal input element and have to forge a custom ajax call – arc Apr 12 '17 at 12:28