Edited at

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

More than 1 year has passed since last update.

ファイルを選択したら画像をプレビューで表示するアレです

これもソースコードは結構公開されていますが、あくまでも備忘録としてのスタンスで


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

ファイルを読み込んだあとにバックグラウンド画像を差し替え

という形でプレビュー表示をします

選択された画像が表示され、元画像は透明化して見えなくしています

今回はこの辺で