JavaScript にはファイル オブジェクトがあり、ファイル オブジェクトはファイル情報の読み取りと書き込みに使用され、ファイル システムに関連する関数を拡張します。 Blob オブジェクトを使用することもできます。「new File(fileParts, fileName, [options])」コンストラクターを使用してファイル オブジェクトを取得します。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
ファイルオブジェクト
File オブジェクトはファイルを表し、ファイル情報の読み取りと書き込みに使用されます。これは、Blob オブジェクトを継承するか、Blob オブジェクトが使用できるすべての状況で使用できる特別な Blob オブジェクトです。
最も一般的な使用例は、フォームのファイル アップロード コントロール () です。ユーザーがファイルを選択すると、ブラウザーはユーザーが選択した各ファイルを含む配列を生成します。これらはすべて File インスタンス オブジェクトです。
// HTML コードは次のとおりです // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];fileinstanceof File // true上記のコードでは、file はユーザーが選択した最初のファイルであり、File のインスタンスです。
コンストラクタ
ブラウザーは、File インスタンス オブジェクトを生成するための File() コンストラクターをネイティブに提供します。
新しいファイル(配列, 名前 [, オプション])
File() コンストラクターは 3 つのパラメーターを受け取ります。
配列: ファイルの内容を表すバイナリ オブジェクトまたは文字列をメンバーとする配列。
name: ファイル名またはファイルパスを表す文字列。
オプション: 構成オブジェクト、インスタンスの属性を設定します。このパラメータはオプションです。
3 番目のパラメーターはオブジェクトを構成し、2 つのプロパティを設定できます。
type: インスタンス オブジェクトの MIME タイプを示す文字列。デフォルト値は空の文字列です。
lastModified: 最終変更時刻を示すタイムスタンプ。デフォルトは Date.now() です。
以下に例を示します。
var file = new File(['foo'], 'foo.txt', { type: 'text/plain', });インスタンスのプロパティとインスタンス メソッド
ファイル オブジェクトには次のインスタンス プロパティがあります。
File.lastModified: 最終更新時刻
File.name: ファイル名またはファイルパス
File.size: ファイルサイズ(単位バイト)
File.type: ファイルの MIME タイプ
var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / /0myFile.type // ""上記のコードでは、myFile の内容が空で MIME タイプが設定されていないため、size 属性は 0 に等しく、type 属性は空の文字列に等しくなります。
File オブジェクトには独自のインスタンス メソッドがないため、Blob オブジェクトを継承するため、Blob インスタンス メソッドのスライス() を使用できます。
知識を広げてください:
入手方法は 2 つあります。
新しいファイル(ファイルパーツ、ファイル名、[オプション])
fileParts - Blob/BufferSource/String タイプの値の配列。
fileName - ファイル名の文字列。
options - オプションのオブジェクト:
lastModified - 最終変更のタイムスタンプ (整数の日付)。より一般的には、<input type="file">、ドラッグ アンド ドロップ、またはその他のブラウザ インターフェイスからファイルを取得します。この場合、file はオペレーティング システム (OS) からこの情報を取得します。
File は Blob から継承するため、File オブジェクトには同じプロパティに加えて、次のプロパティがあります。
name - ファイル名、lastModified - 最終変更のタイムスタンプ。これは、<input type="file"> から File オブジェクトを取得する方法です。
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0] alter(`ファイル名: ${file.name}`); // 例: my.png alter(`最終更新日: ${file.lastModified}`) // 例: 1552830408824}</script>詳細： 
ご注意ください：
input では複数のファイルを選択できるため、input.files は配列のようなオブジェクトです。ここではファイルが 1 つだけなので、input.files[0] だけを取得します。