HTML로 로컬 텍스트 파일을 읽는 방법

HTML 자체는 로컬 파일을 직접 읽을 수 없지만 다음 방법으로 해결할 수 있습니다. FileReader API 사용: FileReader API의 readAsText() 메서드를 사용하여 텍스트 파일 내용을 읽습니다. XMLHttpRequest 사용: XMLHttpRequest(XHR)를 사용하여 서버에 HTTP 요청을 보내 로컬 파일을 읽습니다. Fetch API 사용: Fetch API를 사용하여 XMLHttpRequest와 유사하지만 보다 현대적인 방식을 제공하는 HTTP 요청을 보냅니다.

HTML에서 로컬 텍스트 파일을 읽는 방법

HTML 자체는 로컬 파일 시스템에 직접 액세스할 수 없습니다. 그러나 다음과 같이 이 문제를 해결할 수 있습니다.

FileReader API 사용

FileReader API는 텍스트 파일 콘텐츠를 읽는 데 사용할 수 있는 readAsText() 메서드를 제공합니다.

<input type="file" id="file-input">

<script>
  const fileInput = document.getElementById('file-input');
  fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target.result;
      // 使用 text
    };
    reader.readAsText(file);
  });
</script>

XMLHttpRequest 사용

XMLHttpRequest(XHR)은 An입니다. HTTP 요청을 통해 서버와 상호작용하는 API입니다. 이를 사용하여 로컬 파일을 읽을 수 있습니다.

<script>
  const request = new XMLHttpRequest();
  request.open('GET', 'local-file.txt');
  request.onload = () => {
    const text = request.responseText;
    // 使用 text
  };
  request.send();
</script>

Fetch API 사용

Fetch API는 XHR의 대안이며 HTTP 요청을 처리하는 보다 현대적인 방법을 제공합니다.

<script>
  fetch('local-file.txt')
  .then(response => response.text())
  .then(text => {
    // 使用 text
  })
  .catch(error => {
    // 处理错误
  });
</script>

참고: 보안상의 이유로 이러한 메서드는 동일한 소스(도메인, 프로토콜 및 포트)의 텍스트 파일만 읽습니다.

위 내용은 HTML로 로컬 텍스트 파일을 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!