ホームページ > 記事 > ウェブフロントエンド > JavaScriptにファイルオブジェクトはありますか？

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

WBOYオリジナル: 2022-06-29 17:25:511683ブラウズ

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(
  [&#39;foo&#39;],
  &#39;foo.txt&#39;,
  {
    type: &#39;text/plain&#39;,
  }
);

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

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

File.lastModified: 最終更新時刻

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

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

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

var myFile = new File([], &#39;file.bin&#39;, {
  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 - オプションのオブジェクト:

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

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

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

name - ファイル名、

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

から File オブジェクトを取得する方法です: <pre class="brush:php;toolbar:false"><input><script>function showFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); // 例如 my.png alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824}</script></pre>

詳細:

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

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

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

【関連する推奨事項:

JavaScript ビデオチュートリアル

、Web フロントエンド ]

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptの配列は自動的に展開されますか?次の記事：JavaScriptの配列は自動的に展開されますか?

続きを見る

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

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

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

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

関連記事

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