jQuery/HTML5 FileAPI：为什么似乎没有触发拖动事件？答案

【问题标题】：jQuery/HTML5 FileAPI: Why does no drag event appear to be triggering?jQuery/HTML5 FileAPI：为什么似乎没有触发拖动事件？
【发布时间】：2012-05-11 01:36:00
【问题描述】：

当我将文件拖到 imageContainer div 上时，为什么这里没有任何反应？控制台中什么都没有，页面上什么都没有，等等。

<div id="imageContainer" style="height: 724px; width: 100%; "></div>

...

$('#imageContainer').on({
    dragenter: function dragEnter() {
        console.log('enter');
        $(this).css('background-color', 'lightBlue');
    },
    dragleave: function dragLeave() {
        console.log('leave');
        $(this).css('background-color', 'white');
    },
    dragover: false,
    drop: function dragDrop (e) {
        console.log('drop');
        jQuery.each(e.dataTransfer.files, function (index, file) {
            var fileReader = new FileReader();
            fileReader.onload = (function (file) {
                return function (e) {
                    $(this).append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>');
                };
            })(file);
            fileReader.readAsDataURL(file);
        });
    }
});

【问题讨论】：

标签： javascript jquery html drag-and-drop fileapi

【解决方案1】：

当你用 Firebug 在 Firefox 上运行它时会说：

e.dataTransfer is undefined

所以你想改变它：

e.originalEvent.dataTransfer

这里是example

【讨论】：

糟糕！但是，即使是固定的，这也不是原因。还是同样的问题。
^^ 与较早的答案有关。 :D
嗯，到目前为止，我一直在使用 Chrome。我的脚本中的某些内容似乎让 Chrome 和 Firefox 都吞下了任何错误，这很不幸，所以我看不到这一点。在 Firefox 中，至少会发生蓝/白颜色的变化，但在 Chrome 中什么都没有发生。关于这个答案特别适用的 drop 事件，我不得不猜测这个答案是正确的；也许此时代码本身是错误的，因为在 Chrome 中删除图像仍然没有任何作用，而在 Firefox 中，它只是将图像作为新页面加载，就像正常一样。
所以我想这个问题的措辞可能更好，“jQuery/HTML5 FileAPI：为什么没有拖动事件似乎正在触发在Chrome中？” w/r/t 没有颜色变化。
小提琴似乎可以在带有颜色变化的 Chrome 中工作，所以我猜它是特定于油脂猴 + 铬 + 文件 API 的东西，它仍然是 unID 的。因此，我会将其设置为我提出的实际问题的答案，但仍会继续寻找我需要的修复程序。 :D

【解决方案2】：

有几件事。

首先确保您使用 http: 而不是 file: 方案加载页面。使用文件：您的放置事件将触发，但 FileReader 将静默失败。

接下来在 FileReader.onload 中将 html 添加到 this 中，即 FileReader。尝试将其添加到 html 元素中。在下面的代码中，#files 指向一个列表。

最后将dataURL嵌入到html中，使用Elements inspector检查，但在标记中看不到。

$(function () {
    $('#dropTarget').on({
        dragenter: function dragEnter() {
            console.log('enter');
            $(this).css('background-color', 'lightBlue');
        },
        dragleave: function dragLeave() {
            console.log('leave');
            $(this).css('background-color', 'white');
        },
        dragover: false,
        drop: function dragDrop(e) {
            console.log('drop');
            jQuery.each(e.originalEvent.dataTransfer.files, function (index, file) {
                var fileReader = new FileReader();
                fileReader.onload = function () {
                    console.log(this.result);
                    $('#files').append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + this.result + '</div>');
                };

                fileReader.readAsDataURL(file);
            });
        }
    });
});

【讨论】：