<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">

<script>

    window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function upload(file) {

        if (!file || !file.type.match(/image.*/)) return;

        document.body.className = "uploading";

        /* Lets build a FormData object*/
        var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
        fd.append("image", file); // Append the file
        fd.append("key", "6528448c258cff474ca9701c5bab6927"); // Get your own key http://api.imgur.com/
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
        xhr.onload = function() {
            // Big win!
            document.querySelector("#link").value = JSON.parse(xhr.responseText).upload.links.imgur_page;
            document.body.className = "uploaded";
        }
		
        xhr.send(fd);
    }
</script>

<style>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #link, p , div {display: none}
    div {display: inline-block;}
    .uploading div {display: none}
    .uploaded div {display: none}
    .uploading p {display: inline}
    .uploaded #link {display: inline}
    em {position: absolute; bottom: 0; right: 0}
</style>

<p>Uploading...</p>
<input type="text" id="link" name="resimurl" >