Question

我正在使用HTML5创建一个应用程序，我希望能够将本地文本文件拖到textarea中。这适用于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更改为段落，跨度或div将允许该区域接受拖放文件。

使用Opera 12将本地文件拖动到textarea中

1 个答案: