JavaScriptにファイルオブジェクトはありますか？

JavaScript にはファイル オブジェクトがあります。ファイル オブジェクトはファイルを表し、ファイル情報の読み取りと書き込みに使用されます。このオブジェクトは Blob オブジェクトを継承し、ファイル システムに関連する機能を拡張します。Blob オブジェクトは次のことができます。ファイル オブジェクトを使用することもできます。"new File(fileParts, fileName, [options])" コンストラクターを使用してファイル オブジェクトを取得することもできます。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript にはファイル オブジェクトがあります

ファイル オブジェクト

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

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

// HTML 代码如下
// <input id="fileItem" type="file">
var file = document.getElementById(&#39;fileItem&#39;).files[0];
file instanceof File // true

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

コンストラクター

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

new File(array, name [, options])

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

array: ファイルの内容を表すバイナリ オブジェクトまたは文字列をメンバーとする配列。

name: ファイル名またはファイル パスを表す文字列。

オプション: 構成オブジェクト。インスタンスのプロパティを設定します。このパラメータはオプションです。

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

type: インスタンス オブジェクトの MIME タイプを示す文字列。デフォルト値は空の文字列です。

lastModified: 最終変更時刻を示すタイムスタンプ。デフォルトは Date.now() です。

以下は例です。

var file = new File(
  ['foo'],
  'foo.txt',
  {
    type: 'text/plain',
  }
);

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

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

File.lastModified: 最終更新時刻

File.name: ファイル名またはファイルパス

File.size: ファイルサイズ (単位バイト)

File.type: ファイルの MIME タイプ

var myFile = new File([], 'file.bin', {
  lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""

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

File オブジェクトには独自のインスタンス メソッドがありません。Blob オブジェクトを継承しているため、Blob インスタンス メソッドのスライス() を使用できます。

拡張された知識:

それを取得するには 2 つの方法があります。

最初のものは、Blob と同様に、コンストラクターを持っています:

##new File(fileParts, fileName, [options] )

• #fileParts - Blob/BufferSource/String 型の値の配列。

• fileName - ファイル名の文字列。

• options - オプションのオブジェクト:
  lastModified - 最終変更のタイムスタンプ (整数の日付)。

#2 番目のタイプ、入力タグより一般的には、

< ; から開始します。 input type="file">

またはドラッグ アンド ドロップまたは他のブラウザ インターフェイスでファイルを取得します。この場合、file はオペレーティング システム (OS) からこの情報を取得します。 File は Blob から継承するため、File オブジェクトには同じプロパティが追加されています:

name - ファイル名、

• lastModified - 最後に変更されたタイムスタンプ。
これは、

から File オブジェクトを取得する方法です:

<input type="file" onchange="showFile(this)"><script>function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824}</script>

詳細:

注意:

Input (入力) は複数のファイルを選択できるため、input.files は配列のようなオブジェクトです。ここではファイルが 1 つだけなので、

input.files[0] を取得します。

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

以上がJavaScriptにファイルオブジェクトはありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。