내 JavaScript 코드가 로컬 텍스트 파일을 읽을 수 없는 이유는 무엇이며 어떻게 해결할 수 있습니까?

브라우저에서 로컬 텍스트 파일 읽기 문제 해결

기본 텍스트 파일 판독기를 만들기 위해 JavaScript 함수가 개발되었습니다. 파일 경로에서 각 줄을 문자 배열로 구문 분석했지만 오류가 발생했습니다. 이 문서의 목적은 이러한 문제를 진단하고 해결하는 것입니다.

오류 진단

처음에는 파일 경로를 성공적으로 검색했음에도 불구하고 코드가 텍스트 내용을 표시하지 못했습니다. 디버깅 시 XMLHttpRequest 개체가 로컬 파일 액세스를 올바르게 처리하지 못하는 것으로 나타났습니다.

Firefox로 변경하면 성공적인 결과가 나오며 잠재적인 브라우저 관련 문제가 강조됩니다. 특히 Chrome에서는 네트워크 오류를 나타내는 XMLHttpRequest 예외 101이 발생했습니다.

브라우저 호환성을 위한 솔루션

브라우저 호환성 문제를 해결하기 위해 Fetch API는, 2015년 JS에 도입된 URL에서 데이터를 가져오는 더 간단하고 강력한 접근 방식을 제공합니다. 업데이트된 코드 버전은 다음과 같습니다.

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

로컬 파일 액세스

최신 브라우저는 파일 시스템 직접 액세스를 엄격하게 제한하므로 file:/// 사용은 피해야 합니다. . 대신 python -m http.server 또는 npx http-server와 같은 경량 웹 서버를 사용하여 표준 HTTP URL을 통해 데이터를 로드할 수 있습니다.

상태 0 처리

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) {
        // process the text content
      }
    }
  };
  rawFile.send(null);
}

사용 예

업데이트된 코드를 사용하려면 file://를 사용하여 파일 경로를 지정하세요. /:

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

위 내용은 내 JavaScript 코드가 로컬 텍스트 파일을 읽을 수 없는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!