html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5拖放本地资源</title>
    <style>
        #imgContainer{
            background-color: #cccccc;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="imgContainer"></div>
<div id="msg"></div>
</body>
<script>
    var imgContainer,msgDiv;
    window.onload=function(){
        imgContainer=document.getElementById("imgContainer");
        msgDiv=document.getElementById("msg");
        imgContainer.ondragover=function(e){
            e.preventDefault();
        }
        imgContainer.ondrop=function(e){
            e.preventDefault();
            //showObj(e.dataTransfer.files);
            var f=e.dataTransfer.files[0];//创建对象
            var fileReader=new FileReader();//读取信息
            //通过fileReader监听事件
            fileReader.onload=function(e){
               //showObj(e.target);
               imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
            }
            fileReader.readAsDataURL(f);
        }
    }
    function showObj(obj){
        var s="";
        for (var k in obj) {
            s+=k+":"+obj[k]+"<br/>"
        }
        msgDiv.innerHTML=s;
    }
</script>
</html>
css

                                
javascript

                                
提交运行