Bildvorschau und entfernen mit jQuery

Question

Ich habe ein Problem mit der Kodierung Bild Vorschau in Jquery.

Ich möchte den Benutzern Multichosed Bild vor dem Hochladen meines Servers zeigen. Und eine, die buton auf jedem Bild abbricht. Wenn dieses Buton klickt, wird das Foto aus der Vorschau entfernt.

Wenn Sie auf save buton klicken, speichern Sie das gesamte Vorschaubild auf meinem Server.

Ich brauche es, pls help me :)

<script type="text/javascript"> 
     $('#images').on('change',function(e){ 
      var files=e.target.files; 
      $.each(files, function(i,file){ 
       var reader = new FileReader(); 
       reader.readAsDataURL(file); 
       reader.onload = function(e){ 
        var preDiv=document.querySelector("#imgs ul"); 
        var template="<li class='col-md-3 col-sm-4 col-xs-6'><img src='"+e.target.result+"'/><span class='glyphicon glyphicon-remove cancel'></span></li>"; 
        preDiv.innerHTML+=template; 
       }; 
      }); 
     }); 



     $(".cancel").click(function(){ 
      $(this).parent().remove(); 
     }); 
    </script> 

Answer 1

gelöstes Problem.

hinzugefügt span-Element Onclick Verfahren in dieser Zeile:

var template="<li class='col-md-3 col-sm-4 col-xs-6'><img src='"+e.target.result+"'/><span class='glyphicon glyphicon-remove cancel' onclick='imgRemove(this)'></span></li>"; 

und erstellt diese Methode:

function imgRemove(ths) 
      { 
       $(ths).parent().remove(); 
      }