Tôi có một HTML object( embed) lấp đầy chiều rộng và chiều cao của trang. Câu trả lời của @ máy bay kỹ thuật số hoạt động trên các trang web bình thường nhưng không phải nếu người dùng rơi vào một đối tượng nhúng. Vì vậy, tôi cần một giải pháp khác.
Nếu chúng ta chuyển sang sử dụng giai đoạn chụp sự kiện, chúng ta có thể nhận được các sự kiện trước khi đối tượng nhúng nhận được chúng (chú ý truegiá trị ở cuối cuộc gọi người nghe sự kiện):
// 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);
Sử dụng đoạn mã sau (dựa trên câu trả lời của @ máy bay kỹ thuật số), trang trở thành mục tiêu kéo, nó ngăn đối tượng nhúng nhúng để chụp các sự kiện và sau đó tải hình ảnh của chúng tôi:
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);
Đã thử nghiệm trên Firefox trên Mac.