ドラッグアンドドロップのテキストファイル

ドロップしたテキストファイルを内容または完全な場所で表示して、その場所の内容を「drop_zone」に読み込むことができます。ドラッグアンドドロップのテキストファイル

これは私が今まで持っていたものです。ファイル名にアクセスできました：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<output id="list"></output> 

<script> 
    function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    document.getElementById('drop_zone').innerHTML = files[0].name; 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

    // Setup the dnd listeners. 
    var dropZone = document.getElementById('drop_zone'); 
    dropZone.addEventListener('dragover', handleDragOver, false); 
    dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 
</body> 
</html>

出典

2012-08-31 Meysam Feghhi

は、最終的なコードです：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<script> 
    function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    var reader = new FileReader(); 
    reader.onload = function(event) {    
     document.getElementById('drop_zone').value = event.target.result; 
    }   
    reader.readAsText(files[0],"UTF-8"); 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

    // Setup the dnd listeners. 
    var dropZone = document.getElementById('drop_zone'); 
    dropZone.addEventListener('dragover', handleDragOver, false); 
    dropZone.addEventListener('drop', handleFileSelect, false); 
</script> 
</body> 
</html>

出典

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/はすばらしいリソースです。ファイルの内容をStringとして読み取るには、FileReaderを使用する必要があります。

出典

2012-08-31 11:10:16 Maz

セキュリティ制限のため、適切な権限で設定されたJavaアプレットのようなものを使わずにファイルの内容を読み込むことはできません。それでも、それはあまり可能ではありません。

しかし、それは不可能ではありません。単にファイルをサーバーにアップロードし、内容をブラウザに戻してください。これは、テキスト編集型Webアプリケーションの機能の数です。

どのように実装するかはあなた次第です。

また、Mazが指摘しているように、組み込みのAPIを使用して、何をしようとしているのかを支援することもできます。ただし、このソリューションは必ずしもブラウザ間で互換性があるわけではありません。ここ

出典

2012-08-31 11:12:18 Qix

ドラッグアンドドロップのテキストファイル

答えて

関連する問題