wordpress,codeigniter等の記録

複数のinput=fileに画像プレビューする機能を設置する

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

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

fileのアップロード時にプレビューする機能を実装した

 

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

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


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


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


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

 

$(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

 

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

今日はこの辺で

この記事が気に入ったら
いいね ! しよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です