jQueryで複数のfileのupload前にプレビューする機能を実装する

 画像のプレビューは１つとは限らない・・・

以前、下記のような記事を書きました。

jQueryでFileのupload時に選択した画像をプレビューする機能を実装する

今回は、一段回進めて、複数のfileでプレビューしたり削除したりする機能をご紹介します。

html

<div class="view_box">
  <label>画像１</label>
  <input type="file" class="file">
</div>


<div class="view_box">
  <label>画像２</label>
  <input type="file" class="file">
</div>


<div class="view_box">
  <label>画像３</label>
  <input type="file" class="file">
</div>


<div class="view_box">
  <label>画像４</label>
  <input type="file" class="file">
</div>

Script

$(document).ready(function () {
  $(".file").on('change', function(){
     var fileprop = $(this).prop('files')[0],
         find_img = $(this).parent().find('img'),
         filereader = new FileReader(),
         view_box = $(this).parent('.view_box');
    
    if(find_img.length){
       find_img.nextAll().remove();
       find_img.remove();
    }
    
    var img = '<div class="img_view"><img alt="" class="img"><p><a href="#" class="img_del">画像を削除する</a></p></div>';
    
    view_box.append(img);

    filereader.onload = function() {
      view_box.find('img').attr('src', filereader.result);
      img_del(view_box);
    }
    filereader.readAsDataURL(fileprop);
  });
  
  function img_del(target){
    target.find("a.img_del").on('click',function(){
      var self = $(this),
          parentBox = self.parent().parent().parent();
      if(window.confirm('画像を削除します。\nよろしいですか？')){
        setTimeout(function(){
          parentBox.find('input[type=file]').val('');
          parentBox.find('.img_view').remove();
        } , 0);            
      }
      return false;
    });
  }  
    
});

See the Pen eWaKEB by カバの樹 (@kabanoki) on CodePen.0

特に、スタイルの適用してませんが、前回の１つだけのものよりはかけやすくなってると思います。

今日はこの辺で