직접 파일 시스템 액세스 없이 JavaScript에서 로컬 파일에 어떻게 액세스할 수 있습니까?

JavaScript에서 로컬 디스크 파일에 액세스

보안 문제로 인해 JavaScript에서 로컬 디스크 파일을 직접 여는 것은 허용되지 않습니다. 로컬 파일의 데이터에 액세스하려면 대체 방법이 필요합니다.

로컬 파일 액세스에 FileReader 사용

한 가지 접근 방식은 FileReader API를 활용하는 것입니다. 직접 파일에 액세스하지 않고도 파일 내용을 읽을 수 있습니다. 구현 예는 다음과 같습니다.

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

이 예에서는

• ID가 'file-input'인 파일 입력 요소가 정의됩니다.
• 파일이 파일 입력을 사용하여 선택하면 'readSingleFile' 기능이 트리거됩니다.
• FileReader 개체는 파일을 읽는 데 사용됩니다. 선택한 파일을 텍스트로 표시합니다.
• FileReader의 'onload' 이벤트 핸들러는 파일 읽기 완료를 처리하도록 정의됩니다.
• 'displayContents' 함수는 읽은 파일 내용을 가져와서 표시합니다. ID가 'file-content'인 HTML 요소.

FileReader 접근 방식을 사용하면 클라이언트측 내 로컬 파일 데이터에 액세스할 수 있습니다. JavaScript 코드를 사용하면 파일 내용을 추가로 처리하거나 표시할 수 있습니다.

위 내용은 직접 파일 시스템 액세스 없이 JavaScript에서 로컬 파일에 어떻게 액세스할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!