<!DOCTYPE HTML> <html> <head> </head> <body> DROP!!!!!!!!!! <script type="text/javascript"> function chgImg(evt) { var reader = evt.target; console.log(reader.result); var file = reader.file; document.getElementsByTagName("body")[0].setAttribute("style","background-image:url(" + reader.result + ");"); } document.ondragstart = function(e) { e.preventDefault(); } document.ondragover = function(e) { e.dataTransfer.dragEffect = 'copy'; e.preventDefault(); } document.ondrop = function(e){ var files = e.dataTransfer.files; for(var i = 0, len = files.length; i < len; i++) { var f = files[i]; if (f.type.indexOf("image") == -1) {continue;} var reader = new FileReader(); reader.onloadend = chgImg; reader.file = f; reader.readAsDataURL(f); } e.preventDefault(); } </script> </body> </html>