HTML5拖放本地资源

来源：互联网发布：网络钟点工招聘编辑：程序博客网时间：2024/04/24 16:37
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>HTML5拖放本地资源</title></head>    <script type="text/javascript">       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();                var f= e.dataTransfer.files[0];                var fileReader=new FileReader();                fileReader.onload=function(e){                    showObj(e.target);                    imgcontainer.innerHTML="<img src='"+fileReader.result+"' style='width:100px;height:100px;' />";                }                fileReader.readAsDataURL(f);            }        }        function showObj(obj){            var s="";            for(var k in obj){                s+=k+":"+obj[k]+"<br/>";            }            msgDiv.innerHTML=s;        }    </script><style type="text/css">    #imgcontainer{        width: 500px;        height: 500px;        background-color: antiquewhite;    }</style><body>        <div id="imgcontainer"></div>        <div id="msg"></div></body></html>
0 0