웹 브라우저에서 로컬 텍스트 파일을 어떻게 효율적으로 읽을 수 있습니까?

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

XMLHttpRequest는 브라우저에서 비동기 데이터 검색에 일반적으로 사용되는 방법이지만 때때로 오류가 발생할 수 있습니다. 로컬 텍스트 파일을 읽으려고 할 때 문제가 발생합니다.

다음 문제 XMLHttpRequest

일반적인 오류 중 하나는 요청이 중단되었음을 나타내는 XMLHttpRequest 예외 101입니다. 이 문제는 "file://" 프로토콜을 지정하지 않고 로컬 파일을 읽으려고 할 때 발생할 수 있습니다.

대안: Fetch API

로컬 텍스트를 읽는 더 간단한 방법 파일은 2015년에 도입된 Fetch API를 통해 이루어집니다. Fetch API를 사용하여 다음과 같은 로컬 파일을 읽는 예제 코드입니다. "myText.txt":

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // Process the text data
  })
  .catch((e) => console.error(e));

로컬 파일 액세스

최신 브라우저는 파일 시스템 직접 액세스를 엄격하게 제한합니다. "file:///"을 사용하지 마세요. 대신 Python -m http.server 또는 npx http-server와 같은 경량 웹 서버를 사용하여 일반 HTTP URL을 통해 데이터를 로드하는 것이 좋습니다.

XMLHttpRequest가 포함된 예제 코드

사용하는 경우 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);
}

파일 경로 지정

파일 경로를 지정할 때 "file://" 프로토콜을 포함하는 것을 잊지 마세요:

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

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