HTML5拖放文件在Opera中不起作用答案

【问题标题】：HTML5 Drag and Drop of Files not working in OperaHTML5拖放文件在Opera中不起作用
【发布时间】：2015-12-29 21:17:53
【问题描述】：

下面摘录的代码适用于 IE/FF/Chrome/Safari/etc，但不适用于 Opera。 Opera 给出“您想将文件上传到 www.webserver.edu 吗？”对话框，但回答是或否似乎都不会让“drop”事件触发。错误控制台中不会记录任何错误。此外，拖动其他内容（页面中的字符串）也可以正常工作。

<input type="file" id="fileselect" name="fileselect" multiple="multiple">
<div id="filedrag">or drag files here</div>
...
$(document).ready(function() {
        function DragDropEvent(e) {
                e.stopPropagation();
                e.preventDefault();
                e.target.className = ((e.type == "dragover") ||
                                      (e.type == "dragenter")) ? "hover" : "";
                if (e.type == "drop") {
                        var files = (e.dataTransfer && e.dataTransfer.files);
                        if (files && files.length > 0) UploadFile(files);
                }
        }
        function Init() {
                var filedrag = document.getElementById("filedrag");
                filedrag.addEventListener("dragenter", DragDropEvent, false);
                filedrag.addEventListener("dragover", DragDropEvent, false);
                filedrag.addEventListener("dragleave", DragDropEvent, false);
                filedrag.addEventListener("drop", DragDropEvent, false);
        }
        if (window.File && window.FileList && window.FileReader) {
                Init();
        }
}

【问题讨论】：

Opera 的哪个版本？哪个操作系统？
OS X 下的 Opera 12.16
当前 Opera for OS X 的版本是 34……您可能需要升级。 12.16 太旧了，它仍然有 Opera 废弃的内部渲染引擎。
这很有趣，它似乎在 Windows 7 上的 Opera 34.0 上正常工作。
他们可能已将其锁定以阻止人们自动切换到新的渲染引擎。手动安装可以解决这个问题。

标签： javascript html opera

【解决方案1】：

只要您拥有相当新的 Opera 版本，代码实际上就可以。

【讨论】：

【解决方案2】：

即使在 Opera 12.16（Linux 下）中，代码也能正常工作，但我将在下面描述一个例外。

OK 如果您只选择一个文件它会按预期工作。
KO 如果您选择同时选择多个文件，只看到第一个文件，该事件不会捕获其他文件（实际上它会捕获其他文件，但它们被视为文本字符串/uri-list 类型而不是 files）。我认为这是旧版 Opera（如 12.16）中的一个错误，因为我在 Opera 开发人员 (https://dev.opera.com/articles/drag-and-drop/demo.html) 编写的演示页面中看到了相同的行为

但是，如果您使用的是较新版本的 Opera，代码将 100% 工作（一次/多个文件）。

【讨论】：