0

当我将文件拖到 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);
        });
    }
});
4

2 回答 2

3

当您使用 Firebug 在 Firefox 上运行它时，会说：

e.dataTransfer is undefined

所以你想改变它：

e.originalEvent.dataTransfer

这是示例

于 2012-05-11T01:41:03.200 回答
0

有几件事。

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

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

最后 dataURL 嵌入到 html 中，使用 Elements 检查器检查，但在标记中不可见。

$(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);
            });
        }
    });
});
于 2012-05-11T06:33:58.413 回答