为什么我不能让文件删除以使用 jquery？答案

【问题标题】：Why can't I get file dropping to work with jquery?为什么我不能让文件删除以使用 jquery？
【发布时间】：2016-12-20 21:30:58
【问题描述】：

我正在尝试弄清楚如何进行文件拖放。我已经阅读了许多教程和示例，并且认为我知道如何去做，但我无法让绝对的基本部分正常工作。

这是我目前拥有的代码。如果我将文件拖到 filedropper div 上，浏览器只会加载文件而不是给我删除警报。我错过了什么？

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
    <script language='javascript'>
    $(document).ready(function() {
        $('#filedropper').on('drop', function(e){
            e.preventDefault();
            alert('drop');
            return false;
        });
    });
    </script>
    <div id='filedropper' style='height:100px;width:100px;background:yellow'></div>
</body>
</html>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

首先，如果您使用的是 IE，这可能根本不起作用。 IE（IE 10 除外）不支持文件拖放。

其次，您需要在 $(document).ready 中捕获并阻止 dragOver 功能：

$('#filedropper').on('dragover', function(e) {
    if (e.stopPropagation) { e.stopPropagation(); } // The if checks are excessive but safest
    if (e.preventDefault) { e.preventDefault(); }
});

This 是我学习如何操作时的主要参考。

这应该能让你继续前进。

Check it out on JsBin

【讨论】：

如果你订阅了 dragenter 或 dragleave，你也需要在那里做同样的事情。