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

2017年5月29日

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

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

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

 

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

html


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

 

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

 

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

今日はこの辺で

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-jQuery
-,