動作環境

サーバー: さくら 1G SSD
OS: CentOS 6.5
PHP: 7.0.2
webサーバー: apache2.14

 

ユーザの使い勝手が最悪

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

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

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

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

 

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

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

まず、HTMLで以下の要素を設定


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


次に、javascriptで以下の機能を実装

$(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;
    });
  }  
});

これでOK

■動作確認

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

いかがでしょうか?

次回は、複数のinput[type=file]に対応します。

複数対応の記事を書きました!

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

2 のコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください