1、阻止浏览器默认行为事件。
2、声明拖拽的区域，为该区域html标签添加drop拖拽事件。
3、获取拖拽的文件数据列表。
4、循环文件列表并且判断文件类型。
5、最终读取文件后加载图片即可！！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.app {width: 100vw;height: 50vh;background-color: pink;}* {box-sizing: border-box;padding: 0;margin: 0;}</style></head><body><div class="app">拖拽区域！！</div><script>// 阻止浏览器默认行为const app = document.querySelector('.app')function preventDefaults(e) {e.preventDefault();e.stopPropagation();}['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {app.addEventListener(eventName, preventDefaults, false);});console.log(app);app.addEventListener("drop", (e) => {console.log('drop !', e);let dt = e.dataTransfer;let files = dt.files;console.log(files);for (let i = 0; i < files.length; i++) {const file = files[i];// 检查是否是图片文件if (file.type.startsWith('image/')) {const reader = new FileReader();// 读取文件内容reader.onload = function (e) {var imgObj = new Image();console.log(e.target.result,'e.target.result');imgObj.src = e.target.resultimgObj.onload = function () {document.body.appendChild(imgObj)};};// 将文件内容读取为 Data URLreader.readAsDataURL(file);}}})// app.addEventListener("dragend", (event) => {// console.log('dragend !', event);// })</script>
</body></html>
