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

브라우저에서 로컬 텍스트 파일을 읽는 방법

XMLHttpRequest를 사용하여 간단한 텍스트 파일 판독기를 구현하려고 하면 제대로 작동하지 않을 수 있습니다. 이 문서에서는 잠재적인 문제를 살펴보고 이를 해결하기 위한 솔루션을 제공합니다.

XMLHttpRequest 예외 101

XMLHttpRequest 요청이 로컬 파일 경로로 수행되면 예외 101이 발생할 수 있습니다. 이는 다음과 같은 이유로 발생합니다. 최신 브라우저는 직접 파일 시스템 액세스를 엄격하게 제한합니다. 이를 방지하려면 file:/// 경로를 사용하지 마세요.

Fetch API(XMLHttpRequest의 대안)

URL에서 데이터를 검색하는 보다 현대적이고 사용자 친화적인 접근 방식은 Fetch API입니다. JS에서 소개되었습니다. 다음 코드는 그 사용법을 보여줍니다.

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

로컬 파일에 대한 XMLHttpRequest 구성

XMLHttpRequest를 사용하는 로컬 파일 요청의 경우 상태가 반환되지 않기 때문에 상태 0과 200을 모두 확인해야 합니다. 웹 서버:

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

파일 경로 지정

때 로컬 파일과 함께 XMLHttpRequest를 사용하려면 파일 이름에 file:// 프로토콜을 지정해야 합니다.

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

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