KnowHub

File オブジェクト、FileList オブジェクト、FileReader オブジェクト

ファイルオブジェクト

File オブジェクトはファイルを表し、ファイル情報の読み取りと書き込みに使用されます。これは、Blob オブジェクトを継承するか、Blob オブジェクトが使用できるすべての状況で使用できる特別な Blob オブジェクトです。

最も一般的な使用例は、フォームのファイル アップロード コントロール (<input type="file">) です。ユーザーがファイルを選択すると、ブラウザーはユーザーが選択した各ファイルを含む配列を生成します。ファイルインスタンスオブジェクト。

// HTMLコードは以下の通り
// <input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];
ファイルインスタンスファイル // true

上記のコードでは、「file」はユーザーが選択した最初のファイルであり、File のインスタンスです。

コンストラクター

ブラウザは、ファイル インスタンス オブジェクトを生成するための File() コンストラクターをネイティブに提供します。

新しいファイル(配列, 名前 [, オプション])

File() コンストラクターは 3 つのパラメーターを受け入れます。

  • 配列: ファイルの内容を表すバイナリ オブジェクトまたは文字列をメンバーとする配列。
  • name: ファイル名またはファイルパスを表す文字列。
  • オプション: 構成オブジェクト、インスタンスの属性を設定します。このパラメータはオプションです。

3 番目のパラメーターはオブジェクトを構成し、2 つのプロパティを設定できます。

  • type: インスタンス オブジェクトの MIME タイプを示す文字列。デフォルト値は空の文字列です。
  • lastModified: 最終変更時刻を示すタイムスタンプ。デフォルトは Date.now() です。

以下に例を示します。

var ファイル = 新しいファイル(
  ['フー']、
  「foo.txt」、
  {
    タイプ: 'テキスト/プレーン'、
  }
);

インスタンスのプロパティとインスタンス メソッド

ファイル オブジェクトには次のインスタンス プロパティがあります。

  • File.lastModified: 最終更新時刻
  • File.name: ファイル名またはファイルパス
  • File.size: ファイルサイズ(単位バイト)
  • File.type: ファイルの MIME タイプ
var myFile = new File([], 'file.bin', {
  最終更新日: 新しい日付(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "ファイル.bin"
myFile.size // 0
myFile.type // ""

上記のコードでは、myFile の内容は空であり、MIME タイプが設定されていないため、size 属性は 0 に等しく、type 属性は空の文字列に等しくなります。

File オブジェクトは独自のインスタンス メソッドを持たないため、Blob オブジェクトを継承するため、Blob インスタンス メソッド slice() を使用できます。

FileList オブジェクト

FileList オブジェクトは、選択されたファイルのセットを表す配列のようなオブジェクトであり、各メンバーは File インスタンスです。主に2回登場します。

  • ファイル制御ノード (<input type="file">) の files プロパティは、FileList インスタンスを返します。
  • ファイルのグループをドラッグすると、ターゲット領域の DataTransfer.files プロパティは FileList インスタンスを返します。
// HTMLコードは以下の通り
// <input id="fileItem" type="file">
var files = document.getElementById('fileItem').files;
ファイルinstanceof FileList // true

上記のコードでは、ファイル コントロールの files プロパティは FileList インスタンスです。

FileList のインスタンス属性は主に length で、これは含まれるファイルの数を示します。

FileList のインスタンス メソッドは主に item() で、指定された場所にあるインスタンスを返すために使用されます。位置番号 (0 から始まる) を示す整数をパラメータとして受け入れます。ただし、FileList のインスタンスは配列のようなオブジェクトであるため、角かっこ演算子を直接使用できます。つまり、myFileList[0] は myFileList.item(0) と同等であるため、item() メソッドは通常は使用されません。

FileReader オブジェクト

FileReader オブジェクトは、File オブジェクトまたは Blob オブジェクトに含まれるファイルの内容を読み取るために使用されます。

ブラウザーは、FileReader インスタンスを生成するための FileReader コンストラクターをネイティブに提供します。

var リーダー = 新しい FileReader();

FileReader には次のインスタンス プロパティがあります。

  • FileReader.error: ファイルの読み取り時に生成されるエラー オブジェクト
  • FileReader.readyState: ファイル読み取り時の現在の状態を示す整数。考えられる状態は 3 つあり、「0」はデータがロードされていないことを意味し、「1」はデータがロード中であることを意味し、「2」はロードが完了したことを意味します。
  • FileReader.result: 読み取りが完了した後のファイルの内容。文字列または ArrayBuffer インスタンスの場合があります。
  • FileReader.onabort: abort イベント (ユーザーが読み取り操作を終了する) のリスニング関数。
  • FileReader.onerror: error イベント (読み取りエラー) のリスニング関数。
  • FileReader.onload: load イベント (読み取り操作が完了) のリスニング関数。通常、この関数ではファイルの内容を取得するために result 属性が使用されます。
  • FileReader.onloadstart: loadstart イベント (読み取り操作の開始) のリスニング関数。
  • FileReader.onloadend: loadend イベント (読み取り操作の終了) のリスニング関数。
  • FileReader.onprogress: progress イベントのリスニング関数 (読み取り操作が進行中)。

以下は「load」イベントをリッスンする例です。

// HTMLコードは以下の通り
// <input type="file" onchange="onChange(event)">

関数 onChange(イベント) {
  var ファイル = イベント.ターゲット.ファイル[0];
  var リーダー = 新しい FileReader();
  Reader.onload = 関数 (イベント) {
    コンソール.ログ(イベント.ターゲット.結果)
  };

  Reader.readAsText(ファイル);
}

上記のコードでは、ファイル コントロールが変更されるたびに、最初のファイルの読み取りが試行されます。読み取りが成功すると (「load」イベントが発生すると)、ファイルの内容が出力されます。

FileReader には以下のインスタンスメソッドがあります。

  • FileReader.abort(): 読み取り操作を中止し、readyState プロパティは 2 になります。
  • FileReader.readAsArrayBuffer(): ArrayBuffer 形式でファイルを読み取ります。読み取りが完了すると、result プロパティは ArrayBuffer インスタンスを返します。
  • FileReader.readAsBinaryString(): 読み取りが完了すると、result プロパティは元のバイナリ文字列を返します。
  • FileReader.readAsDataURL(): 読み取りが完了すると、result プロパティはファイルの内容を表すデータ URL 形式 (Base64 エンコード) 文字列を返します。画像ファイルの場合、この文字列は <img> 要素の src 属性で使用できます。この文字列は Base64 で直接デコードできないことに注意してください。デコードする前にプレフィックス `data:/;base64' を文字列から削除する必要があります。
  • FileReader.readAsText(): 読み取りが完了すると、result プロパティはファイルの内容のテキスト文字列を返します。このメソッドの最初のパラメーターはファイルを表す BLOB インスタンスであり、2 番目のパラメーターはオプションであり、テキスト エンコーディングを表します。デフォルトは UTF-8 です。

以下に例を示します。

/* HTMLコードは以下の通り
  <input type="file" onchange="previewFile()">
  <img src="" 高さ="200">
*/

関数プレビューファイル() {
  var プレビュー = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
  var リーダー = 新しい FileReader();

  Reader.addEventListener('load', function () {
    プレビュー.src = リーダー.結果;
  }、 間違い）;

  if (ファイル) {
    Reader.readAsDataURL(ファイル);
  }
}

上記のコードでは、ユーザーが画像ファイルを選択すると、スクリプトが自動的にファイルの内容を読み取り、それをデータ URL として <img> 要素の src 属性に割り当て、画像を表示します。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章