使用 Opera 12 将本地文件拖入 textarea

Question

我正在使用 HTML5 创建一个应用程序，我希望能够将本地文本文件拖到文本区域中。这适用于 Firefox 20.0.1、Chrome 26.0.1410.64 m 和 Internet Explorer 10，但不适用于 Opera 12.15 或 Safari 5.1.7。将打开一个包含该文本的新页面，而不是出现在文本区域中的文件文本。我从this answer 了解到，我应该预料到 Safari 会出现问题，但这意味着它应该适用于 Opera 12。

任何解释或解决问题的帮助将不胜感激。

该应用程序远未完成，位于grideasy.github.io，源文件位于https://github.com/grideasy/grideasy.github.io

要查看效果，请单击“内容”按钮并将文本文件拖到文本区域中。

Safari 和 Opera 都通过了下面的检测功能代码

if(window.File && window.FileReader && window.FileList && window.Blob) {
        dropZone = $('drop_zone');
        dropZone.value="";
        dropZone.addEventListener('dragover', handleDragOver, false);
        dropZone.addEventListener('drop', handleFileSelect, false);
        dropZone.addEventListener('click', storeCursorPosition, false);
        dropZone.addEventListener('keyup', storeCursorPosition, false);
    }
    else {

    }

这可以在 event.js 文件的第 30 到 41 行找到

dropcontent.js 中的以下代码读取文件并显示文件中的文本。

function handleDragOver(evt) {  
   evt.stopPropagation();
   evt.preventDefault();
}

function handleBodyDrop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function handleFileSelect(evt) {    
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.
    var f = files[0];
    if (f) 
    {
        var r = new FileReader();
        r.onloadend = function(e) {extract(e.target.result) }
        r.readAsText(f);
    } 
    else 
    { 
        alert("Failed to load file"); 
    }
}


 function extract(a) {
     $('drop_zone').value=a;
 }

感谢您的任何建议

Answer 1

Opera 似乎不会接受 textarea 作为可用作 dropzone 的对象。将 textarea 更改为段落、span 或 div 将允许该区域接受拖放文件。