Question

我正在玩文件上传，拖放和画布，但由于某种原因，ondrop函数似乎永远不会运行，这里是我正在努力的小提琴：http://jsfiddle.net/JKirchartz/E4yRv/

相关代码是：

canvas.ondrop = function(e) {
        e.preventDefault();
        var file = e.dataTransfer.files[0],
            reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image(),
                imgStr = event.target.result;
            state.innerHTML += ' Image Uploaded: <a href="' +
                imgStr + '" target="_blank">view image</a><br />';
            img.src = event.target.result;
            img.onload = function(event) {
                context.height = canvas.height = this.height;
                context.width = canvas.width = this.width;
                context.drawImage(this, 0, 0);
                state.innerHTML += ' Canvas Loaded: <a href="' + canvas.toDataURL() + '" target="_blank">view canvas</a><br />';
            };
        };
        reader.readAsDataURL(file);
        return false;
    };

为什么这个事件没有发生？我在firefox和chrome中尝试过它。

Answer 1

为了让drop事件发生，您需要拥有ondragover函数：

canvas.ondragover = function(e) {
    e.preventDefault();
    return false;
};

如果您尝试将猫图片拖到画布中，它仍然无法正常工作，则会在Firefox控制台中报告此错误：

[04:16:42.298] uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: http://fiddle.jshell.net/_display/ :: <TOP_LEVEL> :: line 57"  data: no]

但是如果你drag an image from your desktop它将会有效。我认为对于页面中的图像，您应该使用常规DOM访问方法，只有将外部文件拖入浏览器时才需要File API。

Answer 2

据我所知，robertc的答案是浏览器如何继续运行，你必须设置ondragover功能。

但要稍微扩展一下，该函数必须返回false而不是true或undefined - 无操作函数将返回undefined。是否防止默认值似乎无关紧要，ondrop事件处理程序将触发。您需要在ondrop函数中使用preventDefault，否则该文件将立即下载到您浏览器的默认下载文件夹中：

＆＃13;

document.getElementById('drop-zone').ondragover = function(e) {
  return false;
}

document.getElementById('drop-zone').ondrop = function(e) {
  e.preventDefault();
  console.log('ondrop', e);
}

＆＃13;

#drop-zone {
  border: solid;
  height: 3em;
  width: 10em;
}

＆＃13;

<div id="drop-zone">Drop zone</div>

＆＃13;

HTML5 / Canvas onDrop事件未触发？

2 个答案: