[jQuery] ローカル画像ファイルのプレビュー

ローカル画像ファイルを選択して、プレビューを表示する方法を調べた。

参考）input type=”file”で画像アップロード前にプレビュー表示(jQuery)

サンプル

画像ファイルを選択するとプレビューが表示されます。

コード

HTMLコード

<input type="file" id="id_file" >
<img src="" id="id_preview" style="display:none;">

1 2	<input type="file" id="id_file" > <img src="" id="id_preview" style="display:none;">

JavaScriptコード

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

	    var file = $(this).prop('files')[0];
	    var fr = new FileReader();
	    fr.onload = function() {
	        $('#id_preview').attr('src', fr.result );
	        $('#id_preview').css('display','inline');
	    };
	    fr.readAsDataURL(file);
	});

$('#id_file').change(function() {

if ( !this.files.length ) {

return;

}

var file = $(this).prop('files')[0];

var fr = new FileReader();

fr.onload = function() {

$('#id_preview').attr('src', fr.result );

$('#id_preview').css('display','inline');

};

fr.readAsDataURL(file);

});

以上☆