HTML5——将图片拖拽上传

如下图所示：

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #div1{width:200px;height:200px;background:red;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
     var div1=document.getElementById("div1");
     div1.ondragenter=function(){
       this.innerHTML="可以释放了";
     
     }
     div1.ondragover=function(ev){
       ev.preventDefault();
     }
     div1.ondragleave=function(){
     this.innerHTML="将文件拖拽到此区域";    
     }
     div1.ondrop=function(ev){
       ev.preventDefault();
       var files=ev.dataTransfer.files;
       var fd=new FileReader();
       if(files[0].type.indexOf('image')!=-1){
       fd.readAsDataURL(files[0]);
       var ul1=document.getElementById("ul1");
       fd.onload=function(){
         var li1=document.createElement("li");
         var img1=document.createElement("img");
         img1.src=this.result;
         li1.appendChild(img1);
         ul1.appendChild(li1);
       }
       }else{alert("请选择图片上传");}
      }
      
      // alert(files.length);
     }
    
    </script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">

</ul>
</body>
</html>

 

posted @ 2016-04-29 22:30  shuai7boy  阅读(802)  评论(0)  编辑  收藏  举报