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

いくつかあります。

まず、file：スキームではなくhttp：を使用してページをロードするようにしてください。ファイルの場合：ドロップイベントは発生しますが、FileReaderはサイレントに失敗します。

次に、FileReader.onloadで、FileReaderであるこれにhtmlを追加します。代わりに、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 に答える