Entfernen Sie Dateien nach Erhalt der Vorschau, aber vor dem Hochladen auf den Server mit FileReader (HTML5)

Question

Ich habe eine JavaScript-Funktion, die mir die Vorschau der Bilder zeigt, die ich auf den Server hochladen möchte. Nachdem ich diese Vorschau erhalten habe, kann ich einige auswählen, indem ich auf Vorschau klicke und sie entferne, aber ich muss auch die ausgewählten Dateien entfernen, damit sie nicht auf den Server hochgeladen werden.

Der folgende Code kann die Vorschau, aber nicht die Dateien entfernen. Wie kann es verbessert werden?

JavaScript:

$(document).ready(function() { 

    $("#image-holder").on('click', '.thumb-image', function() { 
     $(this).toggleClass("selectedItem"); 
    }); 

    $("#btnDelete").on("click", function() { 
     $(".selectedItem").remove(); 
    }); 

    $("#fileUpload").on('change', function() { 
     //Get count of selected files 
     var countFiles = $(this)[0].files.length; 
     var imgPath = $(this)[0].value; 
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); 
     var image_holder = $("#image-holder"); 
     image_holder.empty(); 
     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { 
      if (typeof(FileReader) != "undefined") { 
       //loop for each file selected for uploading. 
       for (var i = 0; i < countFiles; i++) { 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         $("<img />", { 
          "src": e.target.result, 
          "class": "thumb-image" 
         }).appendTo(image_holder); 
        }; 
        image_holder.show(); 
        reader.readAsDataURL($(this)[0].files[i]); 
       } 
      } else { 
       alert("This browser does not support FileReader."); 
      } 
     } else { 
      alert("Please select only images"); 
     } 
    }); 
}); 

HTML:

<form method="POST" action="upload" enctype="multipart/form-data"> 
     <input id="fileUpload" name="file" multiple="multiple" type="file"/> 
     <br/> 
     <input type="submit" value="Upload"> 
    </form> 
    <button id="btnDelete">Delete</button> 

Answer 1

ich dies getan haben, bevor AngularJS verwenden. In diesem Fall musste ich nur die ng-model Variable auf undefined setzen. Ich habe das nicht getestet, aber Sie sollten in der Lage sein, dasselbe zu erreichen, indem Sie Ihren <input> Wert in ähnlicher Weise löschen.

$("#btnDelete").on("click", function() { 
    $(".selectedItem").remove(); 
    $("#fileUpload").get(0).files[0] = undefined; 
    $("#fileUpload").removeAttr('value'); 
});