로컬 텍스트 파일을 웹 브라우저에서 안정적으로 읽으려면 어떻게 해야 합니까?

로컬 텍스트 파일을 브라우저로 읽기

로컬 텍스트 파일을 브라우저로 읽기 위해 개발자는 전통적으로 XMLHttpRequest를 사용했습니다. 이를 수행하는 한 가지 방법은 파일 경로를 가져와 각 텍스트 줄을 문자 배열로 변환하는 함수를 이용하는 것입니다.

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

그러나 이 접근 방식은 Firefox 이외의 브라우저에서 예외로 인해 실패하는 경우가 많습니다. 이 문제를 해결하려면 개발자는 JS 2015에 도입된 Fetch API를 사용해야 합니다.

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // do something with "text"
   })
  .catch((e) => console.error(e));

또한 보안상의 이유로 file:/// 사용을 피하는 것이 중요합니다. 대신 데이터 로딩을 위해 Python의 http.server 또는 HTTP-Server와 같은 경량 웹 서버를 사용하는 것이 좋습니다.

XMLHttpRequest를 사용하여 로컬에서 파일을 읽으려고 할 때 또 다른 문제가 발생합니다. 이 문제를 해결하려면 개발자는 로컬 파일 로드에 대해 상태가 반환되지 않으므로 상태 0을 확인해야 합니다.

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;
        console.log(allText);
       }
    }
  }
  rawFile.send(null);
}

readTextFile("file:///C:/your/path/to/file.txt");

위 내용은 로컬 텍스트 파일을 웹 브라우저에서 안정적으로 읽으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!