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

Question

下面摘录的代码在 IE/FF/Chrome/Safari/etc 中有效，但在 Opera 中无效。 Opera 提供了一个 "Do you want to upload your files to www.webserver.edu?" 对话框，但回答 Yes 或 No 似乎都不会触发 "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();
        }
}

Answer 1

只要你有一个相当新的 Opera 版本，代码实际上是好的。

Answer 2

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

OK 如果您 select 只有一个文件 它会按预期工作 。
KO 如果您 select 一次处理多个文件，则只会看到第一个文件，该事件不会捕获其他文件（实际上它捕获其他但它们被视为 text/uri-list 类型的字符串而不是 files）。我认为这是旧版 Opera（如 12.16）中的错误，因为我在 Opera 开发人员 (https://dev.opera.com/articles/drag-and-drop/demo.html)

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

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

HTML5 Drag and Drop of Files not working in Opera

javascript

html

opera