472

ファイルのパスを取得し、テキストの各行を char 配列に変換する関数を作成して、単純なテキスト ファイル リーダーを作成しようとしていますが、機能していません。

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

ここで何がうまくいかないのですか？

コードを以前のリビジョンから少し変更した後も、これはまだ機能していないようで、XMLHttpRequest例外 101 が発生しています。

これを Firefox でテストしたところ動作しますが、Google Chrome では動作せず、例外 101 が発生し続けます。これを Firefox だけでなく他のブラウザー (特に Chrome) でも動作させるにはどうすればよいですか? )?

4

22 に答える 22

373

ステータス 0 を確認する必要があります (ファイルを でローカルにロードする場合XMLHttpRequest、 からではないためステータスが返されませんWebserver) 。

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

ファイル名で指定file://します。

readTextFile("file:///C:/your/path/to/file.txt");
于 2013-01-21T20:20:34.627 に答える
31

はい、JS はローカル ファイルを読み取ることができます (FileReader() を参照) <input type="file">。

次に、JS を使用して、ファイルまたはファイルのリスト、それらのプロパティの一部、およびファイルまたはファイルのコンテンツを処理 (サンプル ビュー) できます。

セキュリティ上の理由で JS ができないことは、自分のコンピューターのファイルシステムに (ユーザー入力なしで) 自動的にアクセスすることです。

JS がローカルの fs に自動的にアクセスできるようにするには、JS を含む html ファイルではなく、hta ドキュメントを作成する必要があります。

hta ファイルには、その中に JS または VBS を含めることができます。

ただし、hta 実行可能ファイルは Windows システムでのみ動作します。

これは標準的なブラウザの動作です。

また、Google Chrome は fs API で動作しました。詳細はこちら: http://www.html5rocks.com/en/tutorials/file/filesystem/

于 2016-01-29T03:31:48.963 に答える
13

Fetchと async 関数の使用

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')
于 2019-01-08T13:15:36.103 に答える
12

2 つの関数を作成してみてください。

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}
于 2013-10-16T23:29:49.393 に答える
11

他の例 - FileReader クラスを持つ私のリーダー

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>
于 2015-02-19T15:35:07.340 に答える
-1

私は知っています、私はこのパーティーに遅れています。私が持っているものをお見せしましょう。

これはテキストファイルの単純な読み取りです

var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

これが役立つことを願っています。

于 2020-03-16T09:50:22.143 に答える
-1

この関数はブラウザ用に作成され、ファイル ピッカー ダイアログを開き、ユーザーが選択した後にファイルをバイナリとして読み取り、読み取ったデータでコールバック関数を呼び出します。

function pickAndReadFile(callback) {
    var el = document.createElement('input');
    el.setAttribute('type', 'file');
    el.style.display = 'none';
    document.body.appendChild(el);
    el.onchange = function (){
        const reader = new FileReader();
        reader.onload = function () {
            callback(reader.result);
            document.body.removeChild(el);
        };
        reader.readAsBinaryString(el.files[0]);
    }
    el.click();
}

そして、次のように使用します。

pickAndReadFile(data => {
  console.log(data)
})
于 2021-12-19T08:24:04.000 に答える