HTML5 и API файлов в Chrome

71
10

Я пытаюсь заставить этот кусок кода работать в Chrome (последняя версия 10.0.648.205), и он работает как ожидается в Firefox. Здесь e.target.result функции showImage пуст. Может ли кто-нибудь сказать мне, что я делаю неправильно?


$(function () {

var dropbox = document.getElementById("dropimage");

dropbox.addEventListener("dragenter", function (e) {
this.className = "over";
e.preventDefault();
e.stopPropagation();
}, false);

dropbox.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

dropbox.addEventListener("dragleave", function (e) {
var target = e.target;

if (e && e === dropbox) {
this.className = "";
}
e.preventDefault();
e.stopPropagation();
}, false);

dropbox.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();

var files = e.dataTransfer.files;
var count = files.length;

if (count > 0) {
handleFiles(files)
}
}, false);

function handleFiles(files) {
$("#droplabel").html("Processing...");

file = files[0];

var reader = new FileReader();
reader.onloadend = showImage;
reader.readAsDataURL(file);
}

function showImage(e) {
$("#playerImage").attr("src", e.target.result);
$("#droplabel").html("Done");
}
});


HTML прямолинейный (для простоты я использовал строки, содержащие скрипты):


<html>
<body>
<img id="playerImage"/>
<div id="dropimage">
<span id="droplabel">Drop file here...</span>
</div>

</body>
</html>


Кроме того, если я пытаюсь изменить dropbox.addEventListener для jQuery $.bind, он ничего не делает. Есть предположения?

спросил(а) 2011-04-21T23:38:00+04:00 9 лет, 5 месяцев назад
1
Решение
90

Проблема заключалась в том, что я открывал html в качестве файла. Хрому это не нравится, поэтому я решил проблему, поместив мой html файл в папку wwwroot и открыв его с помощью адреса localhost/dnd.html.

ответил(а) 2011-04-29T16:59:00+04:00 9 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема