Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/363.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript HTML5拖放不在Opera中工作的文件_Javascript_Html_Opera - Fatal编程技术网

Javascript HTML5拖放不在Opera中工作的文件

Javascript HTML5拖放不在Opera中工作的文件,javascript,html,opera,Javascript,Html,Opera,下面摘录的代码适用于IE/FF/Chrome/Safari/etc,但不适用于Opera。 Opera提供了一个“是否要将文件上载到www.webserver.edu?”对话框,但回答“是”或“否”似乎都不会触发“删除”事件。错误控制台中未记录任何错误。此外,拖动其他内容(页面中的字符串)也可以正常工作 <input type="file" id="fileselect" name="fileselect" multiple="multiple"> <div id="filed

下面摘录的代码适用于IE/FF/Chrome/Safari/etc,但不适用于Opera。 Opera提供了一个“是否要将文件上载到www.webserver.edu?”对话框,但回答“是”或“否”似乎都不会触发“删除”事件。错误控制台中未记录任何错误。此外,拖动其他内容(页面中的字符串)也可以正常工作

<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();
        }
}

或者将文件拖到这里
...
$(文档).ready(函数(){
功能DragDropEvent(e){
e、 停止传播();
e、 预防默认值();
e、 target.className=((e.type=“dragover”)||
(e.type==“dragenter”)?“悬停”:“;
如果(例如,类型=“下降”){
var files=(e.dataTransfer&&e.dataTransfer.files);
如果(files&&files.length>0)上载文件(files);
}
}
函数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,代码实际上是很好的。

即使在Opera 12.16(Linux下)中,代码也可以正常工作,下面我将描述一个例外

  • OK
    如果只选择一个文件它将按预期工作
  • KO
    如果一次选择多个文件,只看到第一个文件
    ,事件不会捕获其他文件(实际上它捕获其他文件,但它们被视为文本/uri列表类型的字符串,而不是文件)。我假设这是旧版本Opera中的一个错误(如12.16)因为我在Opera开发人员编写的演示页面中看到了相同的行为()

但是,代码可以100%工作(一次工作一个/多个文件)如果您使用的是较新版本的Opera。

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