input type="file"で選択した画像をプレビュー表示

ファイルを選択したら画像をプレビューで表示するアレです
これもソースコードは結構公開されていますが、あくまでも備忘録としてのスタンスで

html

htmlはこのようになっています

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

accept="image/*" これで画像ファイル限定ということにしています

css

.input-file .preview {
  background-image: url(/hoge.jpg);
}
.input-file input[type="file"] {
  opacity: 0;
}

.previewには「ファイルを選択してください」的メッセージ画像があるとお考え下さい
opacity: 0; これでファイルフォームが透明化され見えなくなっています

プレビュー部分のサイズ等は適宜設定してみてください

javaScript

$('#imgFile').change(
    function () {
        if (!this.files.length) {
            return;
        }

        var file = $(this).prop('files')[0];
        var fr = new FileReader();
        $('.preview').css('background-image', 'none');
        fr.onload = function() {
            $('.preview').css('background-image', 'url(' + fr.result + ')');
        }
        fr.readAsDataURL(file);
        $(".preview img").css('opacity', 0);
    }
);

ファイルを読み込んだあとにバックグラウンド画像を差し替え
という形でプレビュー表示をします
選択された画像が表示され、元画像は透明化して見えなくしています

今回はこの辺で