[javascript] 로컬 텍스트 파일을 읽는 방법?

파일의 경로를 가져 와서 각 텍스트 줄을 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)에서도 작동하도록하려면 어떻게해야합니까? )?

답변

상태 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");

답변

자바 스크립트를 방문하십시오 ! readAsText 섹션으로 이동하여 예제를 시도하십시오. FileReader 의 readAsText 함수 작동 방식을 알 수 있습니다 .

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>

답변

자바 스크립트 에 fetch api 를 도입 한 후에는 파일 내용을 읽는 것이 더 간단 할 수 없습니다.

텍스트 파일을 읽는 중

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

JSON 파일 읽기

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))
   // outputs a javascript object from the parsed json

30/07/2018 업데이트 (면책 조항) :

이 기술은 Firefox 에서는 잘 작동 하지만 Chrome 의 fetch구현은 file:///이 업데이트를 작성한 날짜 (Chrome 68에서 테스트)에 URL 체계를 지원하지 않는 것 같습니다 .

업데이트 -2 (면책 조항) :

이 기술은 Chrome과 동일한 (보안) 이유로 Firefox 버전 68 (2019 년 7 월 9 일) 이상 에서는 작동하지 않습니다 CORS request not HTTP. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp를 참조 하십시오 .

답변

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});

<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

스 니펫 확장

답변

존 페리맨,

예. js는 로컬 파일 (FileReader () 참조)을 읽을 수 있지만 자동으로 읽을 수는 없습니다. 사용자는 파일 또는 파일 목록을 html을 사용하여 스크립트에 전달해야합니다 <input type=file>.

그런 다음 js를 사용하면 파일 또는 파일 목록, 해당 속성 및 파일 내용을 처리 (예제보기) 할 수 있습니다.

보안상의 이유로 js가 할 수없는 일은 컴퓨터의 파일 시스템에 자동으로 (사용자 입력없이) 액세스하는 것입니다.

js가 로컬 fs에 자동으로 액세스하려면 js가 포함 된 html 파일이 아니라 hta 문서를 작성하는 데 자동으로 필요합니다.

hta 파일은 그 안에 js 또는 vbs를 포함 할 수 있습니다.

그러나 hta 실행 파일은 Windows 시스템에서만 작동합니다.

이것은 표준 브라우저 동작입니다.

또한 구글 크롬은 fs api에서 더 많은 정보를 얻었습니다 : http://www.html5rocks.com/en/tutorials/file/filesystem/

답변

아마 당신은 이미 그것을 시도, 다음과 같이 “false”를 입력 :

 rawFile.open("GET", file, false);

답변

두 가지 함수를 만들어보십시오.

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