5

これは私のコードの一部です。ブロックに画像をドロップしようとすると、preventDefault が機能しません。

        jQuery(document).ready(function($) {
            $.event.props.push('dataTransfer');
            $('#imgDropzone').on({
                dragenter: function(e) {
                    $(this).css('background-color', '#ffd1ff');
                },
                dragleave: function(e) {
                    $(this).css('background-color', '');
                },
                drop: function(e) {
                    e.stopPropagation();
                    e.preventDefault();

                    var file = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    var el = $(this);
                    fileReader.onload = (function(file) {
                        return function(event) {
                            alert(event.target.result);
                        };
                    })(file);
                    fileReader.readAsDataURL(file);
                }
            });
        });

http://jsfiddle.net/LrmDw/

4

1 に答える 1

18

*他のすべてのドラッグ イベントのデフォルトを防止するには、次のようにする必要があります。

http://jsfiddle.net/LrmDw/2/を参照

$('#imgDropzone').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
    e.preventDefault();
});

元のjsfiddleで何が機能していないかを説明するには:

ドロップ領域 (またはページ内の任意の場所) にファイルをドロップすると、ブラウザのデフォルトの動作は、移動してファイルを解釈しようとすることです。たとえば、通常の txt ファイルをドロップすると、ブラウザは jsfiddle から離れて txt ファイルの内容を表示します。これはChromeにあります。

ところで、データを複製するため、base64 URL は好ましくありません。ファイルへの blob ポインターを取得し、それを使用するだけです。

var file = e.dataTransfer.files[0];
var src = (window.URL || window.webkitURL).createObjectURL(file);
$("<img>", {src: src}).appendTo("body");

見る

http://jsfiddle.net/LrmDw/3/

どれか正確にはわかりませんが、気にする必要はありませんでした

于 2013-02-03T16:03:12.200 に答える