9

ドロップされたテキストファイルをその内容または完全な場所で表示して、その場所の内容を「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>
4

3 に答える 3

14

ここに最終的なコードがあります:

<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-31T12:06:28.613 に答える
6

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

于 2012-08-31T11:10:16.610 に答える
0

セキュリティの制限により、適切なパーミッションが設定された Java アプレットのようなものがないと、ページはファイルのコンテンツをロードできません。それでも、それはあまり可能ではありません。

ただし、それが不可能だと言っているわけではありません。ファイルをサーバーにアップロードし、コンテンツをブラウザにエコー バックするだけです。それが、テキスト編集型の Web アプリケーションの数です。

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

さらに、Maz が指摘したように、ビルトイン API を使用して、実行しようとしている操作を支援することもできます。ただし、このソリューションは必ずしもクロスブラウザー互換ではないことに注意してください。

于 2012-08-31T11:12:18.450 に答える