HTML5——本地资源拖放

最新推荐文章于 2021-06-10 11:54:51 发布

唐小狼

最新推荐文章于 2021-06-10 11:54:51 发布

阅读量589

点赞数

分类专栏： html 前端工程师学习笔记 HTML5

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51329412

版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

HTML5本地资源拖放

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>本地拖放</title>
  
  
  
  
   
       <style>
  
  
  
  
   
           #imgContainer{
  
  
  
  
   
               background-color: #cccccc;
  
  
  
  
   
               width:500px;
  
  
  
  
   
               height:500px;
  
  
  
  
   
           }
  
  
  
  
   
       </style>
  
  
  
  
   
       <script src="app1.js"></script>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <div id="imgContainer"></div>
  
  
  
  
   
       <div id="msg"></div>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

app1.js

 
 
  
  
   
   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.readAsDataURL(f);
  
  
  
  
   
           fileReader.onload = function (e) {
  
  
  
  
   
               showObj(e);
  
  
  
  
   
               imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
  
  
  
  
   
           }
  
  
  
  
   
       }
  
  
  
  
   
   }
  
  
  
  
   
    
  
  
  
  
   
   function showObj(obj) {
  
  
  
  
   
       var s = "";
  
  
  
  
   
       for(var k in obj){
  
  
  
  
   
           s+=k+":"+obj[k]+"<br/>";
  
  
  
  
   
       }
  
  
  
  
   
       msgDiv.innerHTML = s;
  
  
  
  
   
   }