From 0fbf5ca82e051a16cf1e03d6daacd1b9d7a42ed2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 26 Dec 2021 23:02:12 +0900 Subject: 2021/12/25 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/filelist/index.md | 176 ++++++++++++++++--------------------- 1 file changed, 78 insertions(+), 98 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/filelist/index.md b/files/ja/web/api/filelist/index.md index 033ba967bd..a081e16b4e 100644 --- a/files/ja/web/api/filelist/index.md +++ b/files/ja/web/api/filelist/index.md @@ -4,91 +4,90 @@ slug: Web/API/FileList tags: - API - File API - - Files + - ファイル +browser-compat: api.FileList translation_of: Web/API/FileList --- -

+{{APIRef("File API")}} -

この型のオブジェクトは、HTML {{HTMLElement("input")}} 要素の files プロパティによって返されます。これにより、<input type="file"> 要素で選択されたファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用しているときに、Web コンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は DataTransfer オブジェクトを見てください。

+この型のオブジェクトは、 HTML の {{HTMLElement("input")}} 要素の `files` プロパティで返されます。これにより、 `` 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は [`DataTransfer`](/ja/docs/Web/API/DataTransfer) オブジェクトを見てください。 -

注: {{Gecko("1.9.2")}} 以下では、input 要素は一度に 1 つのファイルだけサポートします。これは、FileList には 1 つのファイルだけが含まれることを意味します。{{Gecko("1.9.2")}} から、input 要素の multiple 属性が true の場合、FileList は複数ファイルを含められます。

+> **Note:** {{Gecko("1.9.2")}} より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 {{Gecko("1.9.2")}} から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。 -

ファイルリストの使用

+## ファイルリストの使用 -

すべての <input> 要素ノードは、その上に FileList 型の files 属性を持ち、このリスト内の項目へのアクセスを可能にします。例えば、HTML が以下のファイル入力を含んでいるとします。

+すべての `` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。 -

<input id="fileItem" type="file">
-

+ -

次のコード行は、ノードのファイルリスト内の最初のファイルを File オブジェクトとして取得します。

+次のコードの行は、ノードのファイルリスト内の最初のファイルを [`File`](/ja/docs/Web/API/File) オブジェクトとして取得します。 -

var file = document.getElementById('fileItem').files[0];
-

+```js +var file = document.getElementById('fileItem').files[0]; +``` -

メソッドの概要

+## メソッドの概要 - - - - - + + + + +

File item(index);

+ File item(index); +

プロパティ

+## プロパティ - - - - - - - - - - - - + + + + + + + + + + + +

属性	型	説明
`length`	`integer`	リスト内のファイル数を示す読み取り専用の値。
属性	型	説明
`length`	`integer`	読み取り専用で、リスト内のファイル数を示します。

メソッド

+## メソッド -

item()

+### item() -

ファイルリスト内の指定されたインデックスにあるファイルを表す File オブジェクトを返す。

+ファイルリスト内の指定された位置にあるファイルを表す [`File`](/ja/docs/Web/API/File) オブジェクトを返します。 -

 File item(
-   index
- );
-

+ File item( + index + ); -

パラメータ

+#### 引数 -

index: リストから扱うための 0 ベースのインデックス。

+- `index` + - : リストから受け取るファイルの 0 から始まる位置です。 -

戻り値

+#### 返値 -

要求されたファイルを表す File。

+要求されたファイルを表す [`File`](/ja/docs/Web/API/File) です。 -

例

+## 例 -

この例では、input 要素を使用して、ユーザーが選択したすべてのファイルを繰り返し処理します。

+この例では、`input` 要素を使用してユーザーが選択したすべてのファイルを反復処理します。 -

// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
+```js
+// fileInput は HTML の input 要素  です。
 var fileInput = document.getElementById("myfileinput");
 
-// files は FileList オブジェクトです (NodeList に似ています)。
+// files は FileList オブジェクトです (NodeList と同様)
 var files = fileInput.files;
 var file;
 
-// files をくり返します。
-for (var i = 0; i < files.length; i++) {
+// files を反復処理
+for (var i = 0; i < files.length; i++) {
 
     // get item
     file = files.item(i);
@@ -96,33 +95,35 @@ for (var i = 0; i < files.length; i++) {
     file = files[i];
 
     alert(file.name);
-}

+} +``` -

完全な例はこちら。

+こちらが完全な例です。 -

<!DOCTYPE HTML>
-<html>
-<head>
-</head>
-<body>
-<!-- multiple は複数のファイルを選択できるように設定されています。-->
+```html
+
+
+
+
+
+
 
-<input id="myfiles" multiple type="file">
+
 
-</body>
+
 
-<script>
+
 
-</html>

+ +``` -

仕様

+## 仕様書 - - - - - - - - - - - - - - - - - - - - -

仕様書	ステータス	コメント
{{SpecName('File API', '#filelist-section', 'FileList')}}	{{Spec2('File API')}}
{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}	{{Spec2('HTML WHATWG')}}

+{{Specifications}} -

ブラウザの互換性

+## ブラウザーの互換性 -

+{{Compat}} -