如何在Javascript的dragenter事件中判断拖动的内容是文本还是文件

Question

使用dragenter事件，我在网页上显示一个拖放区域，以便快速上传已经拖放的文件，一切都很顺利。然而，当拖动选定的文本时，拖放区域也会弹出。如何早期区分它们？

1. 我知道drop事件公开了所有文件内容，可以使用dataTransfer.files进行迭代，但那太晚了。我需要在dragenter时获取，但我发现files数组始终为空。

2. 我需要完全控制外观和感觉，我不想要现有的库。

3. 我可以看到拖动文本与文件时event.dataTransfer.Clipboard.effectAllowed的值不同，但值也因浏览器而异（Chrome vs FF）。

4. 如果有MooTools，那会有帮助。

- Martin Kool

Answer 1

好的，我已经取得了足够的进展，在Chrome和Firefox（3.6+）中使差异化工作。 这可能并不万无一失，但如果有人可能会发现它有用，这里是代码：

  var isFileTransfer = false;
  if (evt.dataTransfer.types) {
    for (var i=0; i<evt.dataTransfer.types.length; i++) {
      if (evt.dataTransfer.types[i] == "Files") {
        isFileTransfer = true;
        break;
      }
    }
  }

- Martin Kool

---

如果楼主回来了，请将此标记为答案。它对我有用！ - Brent

Answer 2

我需要确定一个文件是从浏览器外部拖入的，还是从浏览器窗口内部拖出的图像。我通过监听document对象上的dragstart事件来实现。当从浏览器外部拖入文件时，dragstart不会触发。因此，如果它被触发了，就意味着页面内的某些内容正在被拖动。

document.addEventListener('dragstart', function() {
    samePageDrag = true;
}, false);

document.addEventListener('dragend', function() {
    if (samePageDrag) {
        samePageDrag = false;
    }
}, false);

通过这种方式，您可以在dragenter或dragover事件后检查samePageDrag的值，以确定被拖动的内容是否来自浏览器外部。

- James M

---

我发现我需要为“drop”事件添加另一个监听器，以便正确清除“samePageDrag”变量，但这正是我所需要的。 - Noah Heck

Answer 3

请在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

如果拖放操作中包含任何文件，则其中一个类型将是字符串“Files”。

这是一行代码的解决方案。

// returns true if dragged item is not a file
// returns false if dragged item is a file
event.dataTransfer.types.indexOf('Files') === -1

// returns true if dragged item is a file
// returns false if dragged item is not a file
event.dataTransfer.types.indexOf('Files') !== -1

- Arian Faurtosh

Answer 4

我写了一个小函数来检测文件拖拽。

function isFileTransfer(evt){
    return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";});
}

- cuixiping