このページは Cloud Translation API によって翻訳されました。

JavaScript でファイルを読み取る

Kayce Basques

Pete LePage

Thomas Steiner

ユーザーのローカルデバイス上のファイルの選択と操作は、ウェブで最もよく使用される機能について説明します。ユーザーはここでファイルや写真の共有や税金の申告を行う場合などに、写真をサーバーにアップロードするドキュメントをご覧くださいまた、サイトがコンテンツを一切知らなくても読み取り、操作ネットワーク経由でデータを転送できますこのページでは、Google Chat でファイルを操作する JavaScript。

従来のやり方でファイルを操作する

このガイドでは、以前の JavaScript メソッドを使用してファイルを扱う方法について説明します。

ファイルを選択

ファイルを選択するには、主に次の 2 つの方法があります。 HTML 入力要素、およびエリアをドラッグ&ドロップできます。

HTML 入力要素

ユーザーがファイルを選択する最も簡単な方法は、 <input type="file"> 要素です。これは、すべての主要なブラウザでサポートされています。これをクリックするとファイルを選択するか、 multiple オペレーティングシステムの組み込みのファイル選択を使用して、 UI です。ユーザーがファイルの選択を終了すると、要素の 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>

次の例では、ユーザーが操作メニューを使用して複数のファイルを選択システムに組み込まれているファイル選択 UI で処理し、選択した各ファイルをできます。

ユーザーが選択できるファイルの種類を制限する

ユーザーが選択できるファイルの種類を制限したい場合もあります。対象たとえば、画像編集アプリは、テキストファイルではなく、画像のみを受け入れます。設定ファイル形式の制限、 accept 属性を input 要素に追加して、受け入れ可能なファイル形式を指定します。

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

カスタムのドラッグ&ドロップ

一部のブラウザでは、<input type="file"> 要素がドロップターゲットでもあります。ユーザーがアプリにファイルをドラッグ&ドロップできるようにします。ただしこのドロップターゲットはサイズが小さく、使いにくい場合もあります。代わりに、Terraform を使用してコア機能を提供した後、 <input type="file"> 要素を使用すると、大きなカスタムのドラッグ&ドロップ機能をあります。

ドロップゾーンを選択

ドロップサーフェスは、アプリケーションの設計によって異なります。必要に応じてドロップサーフェスになりますが、ウィンドウ全体を使用することもできます。

画像圧縮ウェブアプリの Squoosh のスクリーンショット。 — </ph> Squoosh は、ウィンドウ全体をドロップゾーンにします。

画像圧縮アプリの Squoosh では、ユーザーは画像を [select an image] をクリックして <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 または text:

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 を使用して img 要素内に画像を表示します。ユーザーが画像ファイルを選択したことを確認する方法については、 read-image-file のデモ。

ファイルの読み取りの進行状況をモニタリングする

サイズの大きいファイルを読み取るときは、ユーザーに知らせるための UX を用意しておくと便利です。読み取りがどこまで進んだかを示すそのためには、 progress FileReader から提供されたイベント。progress イベントには次の 2 つのプロパティがあります。 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);
}

ヒーロー画像（Vincent Botta 氏、Unsplash より）