1

我正在使用 HTML5 创建一个应用程序，我希望能够将本地文本文件拖到 textarea 中。这适用于 Firefox 20.0.1、Chrome 26.0.1410.64 m 和 Internet Explorer 10，但不适用于 Opera 12.15 或 Safari 5.1.7。文件的文本不会出现在文本区域中，而是会打开一个包含该文本的新页面。我从这个答案中了解到，我应该预料到 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;
 }

感谢您的任何建议

4

1 回答 1

1

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

于 2013-06-22T11:57:37.917 回答