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

はじめに

画像をアップロードするフォームを作る事になりました。

当初案ですと、入力画面にて画像を選択して、確認画面にて一旦アップロードされた画像をプレビューし、画像が間違っていたら再度入力画面に戻るというシステムが進められていました。

でもこれって、使用するユーザがページ遷移の待ち時間があるし、なによりすぐに確認できないっていうので、ストレスが溜まる仕様です。

一般向けのフォームなら少しでもストレスを減らすことで、ユーザのコンバージョン率が高められます。

なので、当初案は却下して、その場で確認できるようにシステムを組み込みました。

動作環境

jquery:2.2.4

jQueryを使ってプレビュー機能を実装

機能として、input[type=file]に画像が選択された時、
つまり、ドラッグで画像をドロップされた時か、ウィンドウから選択された時のどちらかになります。
なので、今回はinput[type=file]の値がチェンジされた時に動作するように、設定します。

HTMLを準備

<div class="view_box">
  <input type="file" class="file">
</div>

プレビューの処理

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

    view_box.append(img);
    
    fileRdr.onload = function() {    
      view_box.find('img').attr('src', fileRdr.result);
      img_del(view_box); 
    }
    fileRdr.readAsDataURL(fileprop);  
  });
  
  function img_del(target)
  {
     target.find("a.img_del").on('click',function(){

      if(window.confirm('サーバーから画像を削除します。\nよろしいですか？'))
      {
         $(this).parent().find('input[type=file]').val('');
         $(this).parent().find('.img_view, br').remove();
         $(this).remove();
      }

      return false;
    });
  }  
});

サンプル

See the Pen fileアップロードプレビュー by カバの樹 (@kabanoki) on CodePen.dark

複数のinput Fileでプレビューする

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