js怎么实现拖拽上传图片功能

写了一个在web页面中将图片拖动到某个div中进行上传的方法，是用原生的js代码实现的不需要其它的插件，下面是效果的示例代码。

js实现图片拖拽上传的方法

例：

<style>
    *{margin:0; padding:0; list-style:none;}
    #box{
        width: 600px;
        height: 300px;
        background: #ccc;
        padding: 50px;
    }
</style>
<div id="box"></div>
<script>
var box=document.getElementById('box');
box.ondragover=function (e){
    e.preventDefault();
}
box.ondrop=function (e){
    e.preventDefault();
    var f = e.dataTransfer.files[0]; //获取到第一个上传的文件对象
    var fr = new FileReader(); //实例FileReader对象
    fr.readAsDataURL(f); //把上传的文件对象转换成url
    fr.onload=function (e){
        console.log(e);
        // var Url = e.target.result;//上传文件的URL
        var Url = this.result;//上传文件的URL
        box.innerHTML+='<img src="'+Url+'" alt="">';
    }
}
</script>