拖拽文件上传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>