자바스크립트로 파일 읽기

Kayce Basques

Pete LePage

Thomas Steiner

사용자의 로컬 기기에 있는 파일 선택 및 상호작용은 다음 중 하나입니다. 웹에서 가장 일반적으로 사용되는 기능입니다. 사용자가 파일을 선택하고 사진을 공유하거나 세금을 제출하는 등의 작업을 할 때 서버에 업로드 문서 또한 사이트에서 직접 읽고 조작할 수 네트워크를 통해 데이터를 전송합니다. 이 페이지에서는 파일과 상호작용하기 위한 JavaScript입니다.

최신 File System Access API

File System Access API는 파일에서 읽고 쓰는 방법을 제공하며 사용자 로컬 시스템의 디렉터리에 저장됩니다 대부분의 Chromium 기반 Chrome, Edge 등의 브라우저를 예로 들 수 있습니다 자세한 내용은 File System Access API.

File System Access API는 모든 브라우저와 호환되지는 않기 때문에 browser-fs-access 사용을 권장합니다. 사용 가능할 때마다 새 API를 사용하는 도우미 라이브러리 기존 접근 방식으로 돌아가지 않을 것입니다.

기존 방식인 파일 작업

이 가이드에서는 기존 JavaScript 메서드를 사용하여 파일과 상호작용하는 방법을 보여줍니다.

파일 선택

파일을 선택하는 두 가지 기본 방법은 HTML 입력 요소를 생성하고, 드래그 앤 드롭 영역.

HTML 입력 요소

사용자가 파일을 선택하는 가장 쉬운 방법은 <input type="file"> 드림 요소가 지원되며, 이 요소는 모든 주요 브라우저에서 지원됩니다. 클릭하면 사용자가 한 개의 파일을 선택하거나 multiple 드림 속성에 포함되어 있으며, 운영체제에서 기본 제공하는 파일 선택을 사용하여 있습니다. 사용자가 파일 선택을 마치면 요소의 change이 있습니다. event.target.files에서 파일 목록에 액세스할 수 있습니다. 는 FileList 객체입니다. FileList의 각 항목은 File 객체입니다.

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>

다음 예에서는 사용자가 자신의 운영 체제를 사용하여 여러 파일을 선택할 수 있습니다. 그런 다음 선택된 각 파일을 살펴보겠습니다

사용자가 선택할 수 있는 파일 형식 제한

사용자가 선택할 수 있는 파일 형식을 제한해야 하는 경우도 있습니다. 대상 예를 들어 이미지 편집 앱은 텍스트 파일이 아닌 이미지만 허용해야 합니다. 설정 파일 형식을 제한하고 accept 드림 속성을 입력 요소에 추가하여 허용되는 파일 형식을 지정합니다.

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

맞춤 드래그 앤 드롭

일부 브라우저에서는 <input type="file"> 요소도 드롭 타겟입니다. 사용자가 파일을 앱으로 드래그 앤 드롭할 수 있습니다. 그러나 이 감소 타겟은 크기가 작아 사용하기 어려울 수 있습니다. 대신 Cloud Build를 사용하여 핵심 기능을 제공한 후 <input type="file"> 요소가 있는 경우 큰 맞춤 드래그 앤 드롭을 제공할 수 있습니다. 표시 영역입니다.

드롭 영역 선택

드롭 표면은 애플리케이션의 디자인에 따라 다릅니다. 사용자가 부분을 드롭 표면으로 만들지만 전체 창을 사용할 수도 있습니다.

</ph> <ph type="x-smartling-placeholder">

이미지 압축 앱인 Squoosh는 사용자가 이미지를 창에서 이미지 선택을 클릭하여 <input type="file">를 호출합니다. 요소가 포함됩니다. 어떤 것을 드롭 영역으로 선택하든 사용자가 이를 명확하게 알 수 있어야 합니다. 그 표면으로 파일을 드래그할 수 있습니다.

드롭 영역 정의

요소를 드래그 앤 드롭 영역으로 사용 설정하려면 이벤트 2개: dragover 및 drop. dragover 이벤트는 브라우저 UI를 업데이트하여 드래그 앤 드롭 동작은 파일의 사본을 만드는 것입니다. drop 이벤트 실행 표면에 파일을 떨어뜨린 후 입력 요소와 마찬가지로 event.dataTransfer.files에서 파일 목록에 액세스할 수 있습니다. FileList 객체 각 FileList의 항목은 File 객체입니다.

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

event.stopPropagation() 드림 및 event.preventDefault() 브라우저의 기본 동작을 중지하고 코드가 대신 실행되도록 둡니다. 이러한 도구가 없으면 그렇지 않으면 브라우저가 페이지에서 벗어나 파일을 열 수 있습니다. 브라우저 창에 떨어뜨렸습니다.

실시간 데모를 보려면 맞춤 드래그 앤 드롭을 참고하세요.

디렉터리는 어떤가요?

안타깝게도 JavaScript를 사용하여 디렉터리에 액세스하는 좋은 방법은 없습니다.

webkitdirectory <input type="file"> 요소의 속성을 통해 사용자가 디렉터리를 선택할 수 있음 확인할 수 있습니다 대부분의 주요 브라우저에서 지원됨 단, Android용 Firefox와 iOS용 Safari는 예외입니다.

드래그 앤 드롭을 사용하도록 설정하면 사용자가 디렉터리를 있습니다. 드롭 이벤트가 실행되면 이 이벤트에는File 디렉터리 내 모든 파일에 대한 액세스는 제공하지 않습니다.

파일 메타데이터 읽기

File 객체에는 파일에 대한 메타데이터가 포함됩니다. 대부분의 브라우저 파일 이름, 파일 크기 및 MIME 유형을 제공합니다. 하지만 플랫폼에 따라 브라우저마다 다른 사용자 또는 추가 서비스를 확인할 수 있습니다

function getMetadataForFileList(fileList) {
  for (const file of fileList) {
    // Not supported in Safari for iOS.
    const name = file.name ? file.name : 'NOT SUPPORTED';
    // Not supported in Firefox for Android or Opera for Android.
    const type = file.type ? file.type : 'NOT SUPPORTED';
    // Unknown cross-browser support.
    const size = file.size ? file.size : 'NOT SUPPORTED';
    console.log({file, name, type, size});
  }
}

input-type-file에서 예를 확인할 수 있습니다. 데모를 들을 수 있습니다.

파일 콘텐츠 읽기

FileReader 사용 메모리로 File 객체의 콘텐츠를 읽습니다. FileReader님에게 다음 작업을 요청할 수 있습니다. 파일을 배열 버퍼로 읽습니다. 데이터 URL 또는 텍스트:

function readImage(file) {
  // Check if the file is an image.
  if (file.type && !file.type.startsWith('image/')) {
    console.log('File is not an image.', file.type, file);
    return;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

이 예에서는 사용자가 제공한 File를 읽은 후 데이터로 변환합니다. URL을 가져오고, 이 데이터 URL을 사용하여 img 요소에 이미지를 표시합니다. 사용자가 이미지 파일을 선택했는지 확인하는 방법을 알아보려면 다음을 참조하세요. read-image-file 데모

파일 읽기 진행률 모니터링

대용량 파일을 읽을 때 사용자에게 알려주는 UX를 제공하면 도움이 될 수 있습니다. 읽기 진행 정도를 나타냅니다. 이를 위해서는 progress 드림 FileReader에서 제공한 이벤트입니다. progress 이벤트에는 두 가지 속성이 있습니다. loaded (읽은 양) 및 total (읽을 양)

function readFile(file) {
  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    const result = event.target.result;
    // Do something with result
  });

  reader.addEventListener('progress', (event) => {
    if (event.loaded && event.total) {
      const percent = (event.loaded / event.total) * 100;
      console.log(`Progress: ${Math.round(percent)}`);
    }
  });
  reader.readAsDataURL(file);
}

히어로 이미지: 빈센트 보타 - Unsplash