wordpress,codeigniter等の記録

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

動作環境

サーバー: さくら 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]に対応します。

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

複数のファイルアップロードにプレビューする機能を設置する

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

Comments (2)
  1. We’re a gaggle of volunteers and opening a new scheme in our community.
    Your site provided us with useful information to work on. You have performed an impressive job and
    our whole community will be thankful to you.

    1. 管理人 より:

      It seemed that I was able to help you, so it was good.

コメントを残す

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