阻止浏览器加载拖放文件 [英] Prevent browser from loading a drag-and-dropped file

问题描述

当一个文件被放入上传区域时，一切都很好。

但是，如果我不小心将文件放在上传区域之外，浏览器会将本地文件加载为新页面。

如何防止这种情况？

谢谢！

解决方案

您可以向所有拖放事件调用 preventDefault（）的窗口添加事件侦听器。

示例：

  window.addEventListener（dragover，function（e）{
e = e || event; 
 e.preventDefault （）; 
}，false）; 
 window.addEventListener（drop，function（e）{
 e = e || event; 
 e.preventDefault（）; 
}，false）; 
  

I'm adding an html5 drag and drop uploader to my page.

When a file is dropped into the upload area, everything works great.

However, if I accidentally drop the file outside of the upload area, the browser loads the local file as if it is a new page.

How can I prevent this behavior?

Thanks!

解决方案

You can add a event listener to the window that calls preventDefault() on all dragover and drop events.
Example:

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

这篇关于阻止浏览器加载拖放文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！