Blog スタッフブログ

JavaScript

input type=”file”で画像プレビューを表示する方法

メールフォームなどで画像を送りたい場合以下のHTMLタグを使用します。

<input type="file">

デフォルトでは設定したファイル名が表示されるのみです。

これを使いやすくするためにファイルを設定した時に画像プレビューが表示されるようにします。

手順

1.htmlを用意します。

<div class="fileview">
       <div class="set">
              <input accept="image/*" id="item" type="file">
       </div>
       <div class="text">
              画像ファイルを選択してアップロード
       </div>
</div>
<div class="preview">
</div>

2.javascriptを用意します。

$('#item').change(
    function () {
        if (!this.files.length) {
            return;
        }
        var file = $(this).prop('files')[0];
        var fr = new FileReader();
        var styles = {
            // 画像選択前のstyle
            "background-image", "none",
            "background-repeat", "no-repeat",
            "background-size", "cover",
            "background-position", "center center",
        };
        $('.preview').css(styles);
        fr.onload = function() {
            var styles = {
                // 画像選択後のstyle
                "background-image", 'url(' + fr.result + ')',
                "background-repeat", "no-repeat",
                "background-size", "cover",
                "background-position", "center center",
            };
            $('.preview').css(styles);
        }
        fr.readAsDataURL(file);
    }
);

input type=”file”で選択した画像が.previewの背景画像に表示されます。

配置や画像の大きさはCSSで調整します。

戻る一覧へ戻る