У меня есть HTML object( embed), который заполняет ширину и высоту страницы. Ответ @ digital-plane работает на обычных веб-страницах, но не в том случае, если пользователь падает на внедренный объект. Поэтому мне нужно было другое решение.
Если мы переключимся на использование фазы захвата событий, мы сможем получить события до того, как встроенный объект получит их (обратите внимание на trueзначение в конце вызова слушателя событий):
// document.body or window
document.body.addEventListener("dragover", function(e){
e = e || event;
e.preventDefault();
console.log("over true");
}, true);
document.body.addEventListener("drop", function(e){
e = e || event;
e.preventDefault();
console.log("drop true");
}, true);
Используя следующий код (на основе ответа @ digital-plane), страница становится целью перетаскивания, она предотвращает встраивание объектов в события и затем загружает наши изображения:
document.body.addEventListener("dragover", function(e){
e = e || event;
e.preventDefault();
console.log("over true");
}, true);
document.body.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
console.log("Drop true");
// begin loading image data to pass to our embed
var droppedFiles = e.dataTransfer.files;
var fileReaders = {};
var files = {};
var reader;
for (var i = 0; i < droppedFiles.length; i++) {
files[i] = droppedFiles[i]; // bc file is ref is overwritten
console.log("File: " + files[i].name + " " + files[i].size);
reader = new FileReader();
reader.file = files[i]; // bc loadend event has no file ref
reader.addEventListener("loadend", function (ev, loadedFile) {
var fileObject = {};
var currentReader = ev.target;
loadedFile = currentReader.file;
console.log("File loaded:" + loadedFile.name);
fileObject.dataURI = currentReader.result;
fileObject.name = loadedFile.name;
fileObject.type = loadedFile.type;
// call function on embed and pass file object
});
reader.readAsDataURL(files[i]);
}
}, true);
Проверено на Firefox на Mac.