html5拖放本地资源

时间：2022-11-20 21:47:05

  我们可以从本地的资源中拖拽一张图片到网页中，这在HTML和JS的结合下是比较简单的。也即是说一张图片不仅可以在网页中进行拖动，还可以从电脑上拖动。具体实现如下：
（1）HTML中代码实现如下：

[html]  view plain  copy  print ?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.   
  7.     <style>  
  8.   
  9.         #imgContainer{  
  10.   
  11.             background-color: aqua;  
  12.             width: 500px;  
  13.             height: 500px;  
  14.         }  
  15.     </style>  
  16.   
  17.     <script src="app02.js"></script>  
  18.   
  19. </head>  
  20. <body>  
  21.   
  22.     <div id="imgContainer"></div>  
  23.     <div id="msg"></div>  
  24. </body>  
  25. </html>  

（2）JS中实现如下：

[javascript]  view plain  copy  print ?
  1. /** 
  2.  * Created by chenyufeng on 15/9/28. 
  3.  */  
  4.   
  5. var imgContainer,msgDiv;  
  6.   
  7. window.onload = function(){  
  8.   
  9.     imgContainer = document.getElementById("imgContainer");  
  10.     msgDiv = document.getElementById("msg");  
  11.   
  12.   
  13.     imgContainer.ondragover = function(e){  
  14.   
  15.         e.preventDefault();  
  16.   
  17.     };  
  18.   
  19.     imgContainer.ondrop = function(e){  
  20.   
  21.         e.preventDefault();  
  22.   
  23.         //showObj(e.dataTransfer.files);  
  24.   
  25.         var f = e.dataTransfer.files[0];  
  26.         var fileReader = new FileReader();  
  27.         fileReader.onload = function(e){  
  28.   
  29.             showObj(e.target);  
  30.   
  31.             imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"  
  32.   
  33.         };  
  34.         fileReader.readAsDataURL(f);  
  35.     }  
  36.   
  37.   
  38. };  
  39.   
  40. function showObj(obj){  
  41.   
  42.     var s = "";  
  43.     for(var k in obj){  
  44.   
  45.         s+=k+":"+obj[k]+"<br/>"  
  46.   
  47.     }  
  48.     msgDiv.innerHTML = s;  
  49. }  
标签：

相关文章