J'ai un HTML object
(embed
) qui remplit la largeur et la hauteur de la page. La réponse de @ digital-plane fonctionne sur des pages Web normales, mais pas si l'utilisateur tombe sur un objet incorporé. J'avais donc besoin d'une solution différente.
Si nous passons à l'utilisation de la phase de capture d'événements, nous pouvons obtenir les événements avant que l'objet intégré ne les reçoive (notez la true
valeur à la fin de l'appel de l'écouteur d'événements):
// 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);
En utilisant le code suivant (basé sur la réponse de @ digital-plane), la page devient une cible de glissement, elle empêche les incorporations d'objets de capturer les événements, puis charge nos images:
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);
Testé sur Firefox sur Mac.