<!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>
HTML5拖放本地资源
最新推荐文章于 2021-01-28 08:39:42 发布