拖拽文件上传demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
        }
        .doraTarget{
            width: 300px;
            height: 280px;
            border: 1px solid #ccc;
            line-height: 280px;
            text-align: center;
            color: #ccc;
        }
        button{
            height: 60px;
        }
        .cancas-img{
                 display: flex;
        }
        .cancas-img >li{
            list-style: none;
        }
        .cancas-img >li>img{
            width: 100px;
            height: 80px;
            padding: 10px 0;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="doraTarget">
            请点击上传或者把目标对象放到这里
        </div>
        <button onclick="uploadFileNow()">上传</button>
    </div>
    <ul id="cancasImg" class="cancas-img"></ul>
    <script>
        //目标对象
        let doraBox = document.querySelector(".doraTarget");
        let canvasImg = document.getElementById('cancasImg')
        let allBaseImg=[];
        let AllowImgFileSize = 1024*400;
        doraBox.addEventListener('dragenter',function(){
            console.log('进入');
        },false)
        doraBox.addEventListener('dragover',function(ev){
            ev.preventDefault();
        },false)
        doraBox.addEventListener('drop',function(ev){
            console.log(ev.dataTransfer.files);
            ev.preventDefault()
            var dtfiles = ev.dataTransfer.files
            //转化成base64
            transferDataToBase64(dtfiles)
        },false)
        function transferDataToBase64(dtfiles){
            console.log(11);
            for (let i = 0; i < dtfiles.length; i++) {
                let file = dtfiles[i];
    
                let reader = new FileReader()
                reader.readAsDataURL(file)//转化为base64

                reader.onload=function(ev){
                    console.log(file);
                    let base64Img = ev.target.result;
                    let index = allBaseImg.indexOf(base64Img)
                    if(index!=-1){
                        console.log('index');
                        return
                    }
                    if(base64Img.length>AllowImgFileSize){
                        alert("哥哥太大了")
                        return;
                    }
                    var str =`<li><img src='${base64Img}'><i class='close'>X</i></li>`
                    allBaseImg.push(base64Img)
                    canvasImg.innerHTML+=str;
                }
            }
        }
        // 监听缩略图的删除事件
        canvasImg.addEventListener('click',function(ev){
            var target = ev.target;
            if(target.className =='close'){
                var thisBase = target.previousElementSibling;
                var sindex = allBaseImg.indexOf(thisBase.src)
                allBaseImg.splice(sindex,1)
                target.parentElement.remove()
            }
        },false)
        function uploadFileNow(){
            console.log(11);
            console.log(allBaseImg);
        }
    </script>
</body>
</html>