阻止浏览器加载拖放文件

Question

我正在向我的页面添加一个 html5 拖放上传器。

将文件放入上传区域后，一切正常。

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

如何防止这种行为？

谢谢！

Answer 1

您可以在窗口中添加一个事件侦听器，在所有拖放事件上调用preventDefault()。
示例：

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

Answer 2

试试这个：

document.body.addEventListener('drop', function(e) {
    e.preventDefault();
}, false);

Answer 3

默认情况下阻止所有拖放操作可能不是您想要的。至少在某些浏览器中，可以检查拖动源是否为外部文件。我在StackOverflow answer 中包含了一个检查拖动源是否为外部文件的函数。

修改数字飞机的答案，你可以这样做：

function isDragSourceExternalFile() {
     // Defined here: 
     // https://stackoverflow.com/a/32044172/395461
}

window.addEventListener("dragover",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);
window.addEventListener("drop",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);

Answer 4

要允许仅在某些元素上拖放，您可以执行以下操作：

window.addEventListener("dragover",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") { // check which element is our target
    e.preventDefault();
  }
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") {  // check which element is our target
    e.preventDefault();
  }  
},false);

Answer 5

经过一番折腾，我发现这是最稳定的解决方案：

var dropzoneId = "dropzone";

window.addEventListener("dragenter", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
}, false);

window.addEventListener("dragover", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

window.addEventListener("drop", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

<div id="dropzone">...</div>

在窗口上无条件设置 effectAllow 和 dropEffect 会导致我的拖放区不再接受任何 d-n-d，无论属性是否设置为新。

Answer 6

对于 jQuery，正确答案是：

$(document).on({
    dragover: function() {
        return false;
    },
    drop: function() {
        return false;
    }
});

这里return false 将表现为event.preventDefault() 和event.stopPropagation()。

Answer 7

要建立在其他几个答案中概述的“检查目标”方法的基础上，这里有一个更通用/功能更强大的方法：

function preventDefaultExcept(predicates) {
  return function (e) {
    var passEvery = predicates.every(function (predicate) { return predicate(e); })
    if (!passEvery) {
      e.preventDefault();
    }
  };
}

调用如下：

function isDropzone(e) { return e.target.id === 'dropzone'; }
function isntParagraph(e) { return e.target.tagName !== 'p'; }

window.addEventListener(
  'dragover',
  preventDefaultExcept([isDropzone, isntParagraph])
);
window.addEventListener(
  'drop',
  preventDefaultExcept([isDropzone])
);

Answer 8

我有一个填充页面宽度和高度的 HTML object (embed)。 @digital-plane 的答案适用于普通网页，但如果用户掉到嵌入式对象上则不行。所以我需要一个不同的解决方案。

如果我们切换到使用event capture phase，我们可以在嵌入对象接收到事件之前获取事件（注意事件监听器调用结束时的true值）：

// document.body or window
document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop", function(e){
  e = e || event;
  e.preventDefault();
  console.log("drop true");
}, true);

使用以下代码（基于@digital-plane 的回答）页面成为拖动目标，它防止对象嵌入捕获事件然后加载我们的图像：

document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
  console.log("Drop true");

  // begin loading image data to pass to our embed
  var droppedFiles = e.dataTransfer.files;
  var fileReaders = {};
  var files = {};
  var reader;

  for (var i = 0; i < droppedFiles.length; i++) {
    files[i] = droppedFiles[i]; // bc file is ref is overwritten
    console.log("File: " + files[i].name + " " + files[i].size);
    reader = new FileReader();
    reader.file = files[i]; // bc loadend event has no file ref

    reader.addEventListener("loadend", function (ev, loadedFile) {
      var fileObject = {};
      var currentReader = ev.target;

      loadedFile = currentReader.file;
      console.log("File loaded:" + loadedFile.name);
      fileObject.dataURI = currentReader.result;
      fileObject.name = loadedFile.name;
      fileObject.type = loadedFile.type;
      // call function on embed and pass file object
    });

    reader.readAsDataURL(files[i]);
  }

}, true);

在 Mac 上的 Firefox 上测试。

Answer 9

我正在为多个上传区域使用类选择器，所以我的解决方案采用了这种不太纯粹的形式

基于 Axel Amthor 的回答，依赖于 jQuery（别名为 $）

_stopBrowserFromOpeningDragAndDropPDFFiles = function () {

        _preventDND = function(e) {
            if (!$(e.target).is($(_uploadBoxSelector))) {
                e.preventDefault();
                e.dataTransfer.effectAllowed = 'none';
                e.dataTransfer.dropEffect = 'none';
            }
        };

        window.addEventListener('dragenter', function (e) {
            _preventDND(e);
        }, false);

        window.addEventListener('dragover', function (e) {
            _preventDND(e);
        });

        window.addEventListener('drop', function (e) {
            _preventDND(e);
        });
    },

Answer 10

注意：虽然 OP 没有要求 Angular 解决方案，但我还是来这里寻找的。因此，如果您使用 Angular，这是为了分享我发现的可行解决方案。

根据我的经验，当您向页面添加文件拖放功能时，首先会出现此问题。因此，我的观点是，添加这个的组件也应该负责防止掉出放置区。

在我的解决方案中，拖放区是一个带有类的输入，但任何明确的选择器都可以。

import { Component, HostListener } from '@angular/core';
//...

@Component({
  template: `
    <form>
      <!-- ... -->
      <input type="file" class="dropzone" />
    </form>
  `
})
export class MyComponentWithDropTarget {

  //...

  @HostListener('document:dragover', ['$event'])
  @HostListener('drop', ['$event'])
  onDragDropFileVerifyZone(event) {
    if (event.target.matches('input.dropzone')) {
      // In drop zone. I don't want listeners later in event-chain to meddle in here
      event.stopPropagation();
    } else {
      // Outside of drop zone! Prevent default action, and do not show copy/move icon
      event.preventDefault();
      event.dataTransfer.effectAllowed = 'none';
      event.dataTransfer.dropEffect = 'none';
    }
  }
}

监听器在组件创建/销毁时自动添加/删除，同一页面上使用相同策略的其他组件由于stopPropagation()不会相互干扰。