4

javascript を使用してテキスト ファイルを開き、彼の名前とコンテンツを取得しようとしましたが、入力を使用してディレクトリ/パスを取得したため、現在は文字列に固執しています。

とにかく、私の質問は次のコードで何が間違っているのか、JavaScript を使用してテキスト ファイルのコンテンツを取得するにはどうすればよいですか?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Display Text Files</title>
<script type="text/javascript">
    var str = document.getElementById('txt').value;
    function display() {
        if (str != "") {
            var filename = str.split("/").pop();
            document.getElementById('filename').innerHTML = filename;
        }
    }
</script>
</head>
<body>
<form method="get" action="#"  >
    <input type="file" accept="text/plain" id="txt" />
    <input type="submit" value="Display Text File" onclick="display();" />
</form>
<a href="#" id="filename"></a>
</body>
</html>

編集: また、入力ファイルですべてのファイル オプション (*) をテキスト ファイルのみ (.txt) に無効にしたいです。

ありがとう！

4

1 に答える 1

13

実装している最新のブラウザーFileReaderはこれを行うことができます。ブラウザをテストするには、window.FileReaderが定義されているかどうかを確認してください。

これを行うために今朝だけ書いたコードを次に示します。私の場合、ここで参照されている HTML 要素にファイルをドラッグするだけpanel.in1ですが、使用することもできます<input type="file" />(以下の参照を参照)。

 if (window.FileReader) {
   function dragEvent (ev) {
     ev.stopPropagation (); 
     ev.preventDefault ();
     if (ev.type == 'drop') {
       var reader = new FileReader ();
       reader.onloadend = function (ev) { panel.in1.value += this.result; };
       reader.readAsText (ev.dataTransfer.files[0]);
     }  
   }

   panel.in1.addEventListener ('dragenter', dragEvent, false);
   panel.in1.addEventListener ('dragover', dragEvent, false);
   panel.in1.addEventListener ('drop', dragEvent, false);
 }

reader.onloadendイベントハンドラで復元​​したファイルのテキストを として取得する関数ですthis.result。

MDN からこれを行う方法に関するメカニズムのほとんどを取得しました: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

于 2013-06-04T16:39:27.793 に答える