paranitips

Never stop learning! がモットーのゆるふわエンジニアブログ

inputで画像ファイルを選択したときにその画像を表示する

ファイルを選択するまでは、てきとーにno photo画像をセットしておきます。

また、選択をキャンセルしたときはno photo画像がセットされます。

$(function(){
    function readImage(input) {
        if ( input.files && input.files[0] ) {
            var FR= new FileReader();
            FR.onload = function(e) {
                $('#image').attr( "src", e.target.result );
            };       
            FR.readAsDataURL( input.files[0] );
        }
        else {
            // ファイルが選択されてない
            $('#image').attr( "src", "no_photo.png" );
        }
    }

    $("#file").change(function(){
        readImage( this );
    });
});
<img id="image" src="no_photo.png">
<input id="file" name="photo" type="file">

参考