html5 drop image ex - 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drop Image</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #drophere {
            width: 500px;
            height: 500px;
            position: relative;
        }
        .pink { background-color: pink; }
        .yellow { background-color: yellow; }
        .xbtn {
            width: 50px;
            height: 50px;
            background-color: black;
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">

            <div class="col-md-6">
                <div id="drophere" class="yellow" ondrop="drop(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">
                    drop images here!
                </div>
                <form action="" onsubmit="return false">
                    <div class="form-group">
                        <label for="imgtitle">사진제목</label>
                        <input type="text" name="imgtitle" id="imgtitle" class="form-control" placeholder="제목을 입력하세요.">
                    </div>
                    <button type="submit" class="btn-submit btn btn-info">등록하기</button>
                </form>
            </div>

            <div class="col-md-6">
                <div id="photolist"></div>
            </div>

        </div>

    </div>

 <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>

        var photos = [];
        window.onload = function(){
            localdata = localStorage.getItem("photo");
            if( localdata ) {
                var photodata = JSON.parse(localdata);
                for( var i=0; i<photodata.length; i++){
                    photos.push(photodata[i]);

                var img = "<img src='" + photodata[i].src + "' width='" + photodata[i].width + "' height='" + photodata[i].height + "'>";
                var html = "<div class='pbox'>";
                html += img;
                html += "<p>" + photodata[i].title + "</p>";
                html +="</div>";

                $("#photolist").append(html);

                }
                console.log(photos);
            }
        };

        function drop(e){
            e.preventDefault();
            $("#drophere").removeClass("pink").addClass("yellow");
            var data = e.dataTransfer;
            var files = data.files;
            if( ! files ) return;
            var file = files[0];
            if( file.type == "image/jpeg" || file.type == "image/gif" || file.type == "image/png" ) {
                view(file);
            }
        }

        function view(file){
            if( ! file ) return;
            var reader = new FileReader();
            reader.addEventListener("load",function(){
                var image = new Image();
                var ww, hh, ml, mt;
                image.onload = function(){
                    var w = this.width;
                    var h = this.height;
                    var imginfo = getXY(500, w, h);
                    $(this).attr("width",imginfo.width);
                    $(this).attr("height",imginfo.height);
                    $(this).css({"margin-left":imginfo.leftmargin + "px", "margin-top": imginfo.topmargin + "px"});
                    $("#drophere").html(this);
                    var xbtn = "<div class='xbtn'>X</div>";
                    $("#drophere").append(xbtn);
                }
                image.src = reader.result;
            });
            reader.readAsDataURL(file);
        }

        $("#drophere").on("click",".xbtn",function(){
            $("#drophere").html("drop images here!");
        });

        function dragover(e){
            e.preventDefault();
            $("#drophere").removeClass("yellow").addClass("pink");
        }
        function dragleave(e){
            e.preventDefault();
            $("#drophere").removeClass("pink").addClass("yellow");
        }

        function getXY(maxsize, w, h){
                    var imginfo = {};
                    if( w > maxsize || h > maxsize ) {
                        if( w > h ) {
                            ww = maxsize;
                            hh = (maxsize*h)/w;
                            ml = 0;
                            mt = (maxsize/2)-(hh/2);
                        } else if( h > w ){
                            hh = maxsize;
                            ww = (maxsize*w)/h;
                            ml = (maxsize/2)-(ww/2);
                            mt = 0;
                        } else {
                            ww = maxsize;
                            hh = maxsize;
                            ml = 0;
                            mt = 0;
                        }
                    } else {
                        ww = w;
                        hh = h;
                        ml = (maxsize/2)-(ww/2);
                        mt = (maxsize/2)-(hh/2);
                    }
                    imginfo.width = ww;
                    imginfo.height = hh;
                    imginfo.leftmargin = ml;
                    imginfo.topmargin = mt;
                    return imginfo;
        }


        $(".btn-submit").on("click",function(e){
            e.preventDefault();
            var data = {};
            data.src = $("#drophere img").attr("src");
            data.title = $("#imgtitle").val();
            if( ! data.src || ! data.title ) return;
            var image = new Image();
            image.onload = function(){
                var imginfo = getXY(150, this.width, this.height);
                var img = "<img src='" + data.src + "' width='" + imginfo.width + "' height='" + imginfo.height + "'>";
                var html = "<div class='pbox'>";
                html += img;
                html += "<p>" + data.title + "</p>";
                html +="</div>";

                $("#photolist").append(html);
                data.width = imginfo.width;
                data.height = imginfo.height;
                photos.push(data);
                localStorage.setItem("photo",JSON.stringify(photos) );

            };
            image.src = data.src;
        });

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