jQueryで画像のプレビューと削除

Question

jqueryで画像のプレビューをコーディングする際に問題があります。

私のサーバーをアップロードする前に、ユーザーに複数の画像を表示したい。そして1つはすべてのイメージのキャンセルボタンです。このボタンをクリックすると、写真がプレビューから削除されます。

クリックすると、ブーンを保存すると、すべてのプレビューイメージがサーバーに保存されます。私はそれを必要と

、plsは私を助けて:)

<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

解決の問題を。

追加span要素このラインでのonclick方法：

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>"; 

と、このメソッドを作成しました：

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