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 回答