korea.html with photo preview -1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="map"></div>
            </div>
            <div class="col-md-6">
                <h1 id="name_ko"></h1>
                <h2 id="name_en"></h2>
                <h3 id="name_full"></h3>
                <p id="area"></p>
                <p id="population"></p>
                <p id="info"></p>
                <form id="imgform" onsubmit="return false" style="display:none;">
                    <input type="hidden" id="cid">
                    <input type="file" id="photo" class="form-control">
                    <img src="" id="preview" alt="미리보기">
                </form>
            </div>
        </div>
    </div>

    <script>
        var data = [];
        $.getJSON("korea.json",function(json){
            data = json.korea.city;
        });
        $("#map").load("korea.svg");
        $("#map").on("click",".land",function(){
            var id=$(this).attr("id");
            var info = data.filter(function(v){
                return v.id === id;
            });
            if( info ) {
                var city = info[0];
                $("#name_ko").text(city.name_ko);
                $("#name_en").text(city.name_en);
                $("#name_full").text(city.name_full);
                $("#area").text(city.area);
                $("#population").text(city.population);
                $("#info").text(city.info);
                $("#cid").val(city.id);
                $("#preview").attr("src","");
                $("#imgform").show();
            }
        });

        $("#photo").change(function(){
            previewPhoto(this);
        });

        function previewPhoto(input) {
            if( ! input.files ) return;
            if( ! input.files[0] ) return;
            var reader = new FileReader();
            reader.onload = function(e){
                $("#preview").attr("src",e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }

    </script>
</body>
</html>