文件拖拽上传时怎么阻止浏览器默认打开文件？

广云提问于 2026-03-09 16:40:20 阅读 20

交互

我在做文件拖拽上传功能，但每次把图片拖进页面，浏览器就直接在新标签页打开了那张图，根本没法上传。我试过给容器加了 preventDefault()，但好像没生效。

这是我的 HTML 结构：

<div id="dropzone" style="width: 300px; height: 200px; border: 2px dashed #ccc;">
  拖拽文件到这里
</div>

JS 里监听了 dragover 和 drop 事件，但还是会被浏览器默认行为干扰，到底该怎么正确阻止啊？

我来解答赞 6 收藏

反馈

1 条解答

Top丶树人 Lv1

你漏了dragenter事件也要阻止默认行为。试试这样：

const dropzone = document.getElementById('dropzone');



['dragenter', 'dragover', 'drop'].forEach(eventName => {

  dropzone.addEventListener(eventName, (e) => {

    e.preventDefault();

    e.stopPropagation();

  });

});



dropzone.addEventListener('drop', (e) => {

  // 这里处理上传逻辑

  console.log(e.dataTransfer.files);

});

应该是这三个事件都要阻止默认行为才管用，尤其是dragenter经常被漏掉。

2026-03-09 17:01