拖拽浏览器图片到指定区域时drop事件无法获取文件列表如何解决

错误原因 #

1. 取值逻辑错误：拖拽文件的资源列表存储在dataTransfer.files属性中，你原代码直接将dataTransfer对象当做数组取值，自然返回undefined
2. 事件拦截冲突：你给window绑定了全局drop监听，该监听会先于元素上绑定的drop事件触发，默认会清空dataTransfer中的文件数据，导致元素上的回调读取不到文件

如果你要拖拽的是浏览器其他页面里的在线图片而非本地图片文件，部分场景下不会填充files列表，你需要通过e.originalEvent.dataTransfer.getData('text/html')解析提取图片的url地址进行后续处理。

JS 代码 #

// 仅保留全局dragover阻止默认行为，避免拖拽图片直接打开新页面
window.addEventListener("dragover", (e) => {
  e = e || event;
  e.preventDefault();
}, false);

// 给目标元素绑定dragover阻止默认行为，保证drop事件可正常触发
$('#image-upload-preview').on('dragover', e => e.preventDefault()).on('drop', drop);

function drop(e) {
  e.preventDefault();
  // 正确从files属性中读取文件列表
  const fileList = e.originalEvent.dataTransfer.files;
  if(fileList.length > 0) {
    const file = fileList[0];
    console.log('拖拽的文件资源：', file);
    // 后续可继续处理文件，比如预览、上传等逻辑
  }
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
  <img id="image-upload-preview" style="width:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSClDjLZzrjD5FHPX-nNU5QoTWK-C2XcOD-M6Aabozw6Oem8-0ejje8Lk5DmNbhVOvvMfc&usqp=CAU">
  <div id="cropped_result"></div>
</div>

内容的提问来源于stack exchange，提问作者Sara Ree