ローカル画像ファイルを選択して、プレビューを表示する方法を調べた。
参考)input type=”file”で画像アップロード前にプレビュー表示(jQuery)
サンプル
画像ファイルを選択するとプレビューが表示されます。
コード
HTMLコード
1 2 |
<input type="file" id="id_file" > <img src="" id="id_preview" style="display:none;"> |
JavaScriptコード
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#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); }); |
以上☆