Opera 12에서 로컬 파일을 텍스트 영역으로 드래그

Question

로컬 텍스트 파일을 텍스트 영역으로 드래그 할 수있는 HTML5를 사용하여 응용 프로그램을 만듭니다. 이것은 Firefox 20.0.1, Chrome 26.0.1410.64 m 및 Internet Explorer 10에서는 작동하지만 Opera 12.15 또는 Safari 5.1.7에서는 작동하지 않습니다. 텍스트 영역에 나타나는 파일의 텍스트 대신 텍스트가 포함 된 새 페이지가 열립니다. 나는 this answer에서 사파리의 문제점을 예상해야한다고 생각하지만, 그것이 의미하는 바는 오페라 12와 맞아야한다는 것입니다.

문제를 설명하거나 극복하는 데 도움이되는 모든 도움을 주실 수 있습니다.

어디 근처 완료 응용 프로그램은, '콘텐츠'버튼에 미치는 영향 클릭을보고 텍스트 영역에 텍스트 파일을 드래그 https://github.com/grideasy/grideasy.github.io

에서 소스 파일과 grideasy.github.io이다.

사파리 오페라 모두이 상기 event.js가

가 dropcontent.js에서 다음 코드가 파일을 판독

파일 (41)에 라인 (30)에서 발견된다

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 { 

    } 

아래 검출 기능 코드를 전달 파일의 텍스트를 표시합니다.

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

오페라가 DROPZONE으로 사용할 수있는 개체로 텍스트 영역을 받아들이지 않을 것으로 보인다 제안

Answer 1

주셔서 감사합니다. 텍스트 영역을 단락, 범위 또는 div로 변경하면 해당 영역이 드래그 앤 드롭 된 파일을 허용합니다.