Событие HTML5 / Canvas onDrop не запускается?

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

Для того, чтобы событие сбрасывалось на всех, вам нужна функция 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]

Однако она будет работать, если вы перетащите изображение с рабочего стола .Я думаю, что для изображений на странице вы должны использовать обычные методы доступа DOM, File API необходим только для внешних файлов, перетаскиваемых в браузер.

Answer 2

Насколько я могу судить, Роберт ответит, как браузеры продолжают вести себя, вам нужно установить функцию ondragover.

Но чтобы немного расширить его, функция должна возвращать false, а не true или undefined - неактивные функции вернут undefined.Кажется, не имеет значения, предотвращаете ли вы значение по умолчанию, сработает обработчик события ondrop.В функции ondrop вам понадобится protectDefault, иначе файл будет немедленно загружен в папку загрузки по умолчанию вашего браузера:

document.getElementById('drop-zone').ondragover = function(e) {
  return false;
}

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

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

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