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>

相关阅读:
【读书笔记】《思考，快与慢》
【2020-12-09】别人看不上的，正是绝佳机会
员工的重要性
二叉树的堂兄弟节点
占位
数组中重复的数字
从上到下打印二叉树
Python生成exe
二叉搜索树节点最小距离
第N个斐波那契数

原文地址：https://www.cnblogs.com/shuai7boy/p/5447756.html