From 916982834a676e30f44f71be1b415cd90e36ddcc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 26 Dec 2021 16:14:39 +0900 Subject: Web/API/FileList を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/filelist/index.html | 174 ----------------------------------- files/ja/web/api/filelist/index.md | 174 +++++++++++++++++++++++++++++++++++ 2 files changed, 174 insertions(+), 174 deletions(-) delete mode 100644 files/ja/web/api/filelist/index.html create mode 100644 files/ja/web/api/filelist/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/filelist/index.html b/files/ja/web/api/filelist/index.html deleted file mode 100644 index 033ba967bd..0000000000 --- a/files/ja/web/api/filelist/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: FileList -slug: Web/API/FileList -tags: - - API - - File API - - Files -translation_of: Web/API/FileList ---- -
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
- -

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

- -
-

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

-
- -

ファイルリストの使用

- -

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

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

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

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

メソッドの概要

- - - - - - - -
File item(index);
- -

プロパティ

- - - - - - - - - - - - - - -
属性型説明
lengthintegerリスト内のファイル数を示す読み取り専用の値。
- -

メソッド

- -

item()

- -

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

- -
 File item(
-   index
- );
-
- -
パラメータ
- -
-
index
-
リストから扱うための 0 ベースのインデックス。
-
- -
戻り値
- -

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

- -

例

- -

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

- -
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
-var fileInput = document.getElementById("myfileinput");
-
-// files は FileList オブジェクトです (NodeList に似ています)。
-var files = fileInput.files;
-var file;
-
-// files をくり返します。
-for (var i = 0; i < files.length; i++) {
-
-    // get item
-    file = files.item(i);
-    //or
-    file = files[i];
-
-    alert(file.name);
-}
- -

完全な例はこちら。

- -
<!DOCTYPE HTML>
-<html>
-<head>
-</head>
-<body>
-<!-- multiple は複数のファイルを選択できるように設定されています。-->
-
-<input id="myfiles" multiple type="file">
-
-</body>
-
-<script>
-
-var pullfiles=function(){
-    // クエリセレクターが好き
-    var fileInput = document.querySelector("#myfiles");
-    var files = fileInput.files;
-    // files.length をキャッシュ
-    var fl = files.length;
-    var i = 0;
-
-    while ( i < fl) {
-        // ループ内のファイル var をローカライズする
-        var file = files[i];
-        alert(file.name);
-        i++;
-    }
-}
-
-// input 要素の onchange を設定し pullfiles を呼び出すようにします。
-document.querySelector("#myfiles").onchange=pullfiles;
-
-//a.t
-</script>
-
-</html>
- -

仕様

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

ブラウザの互換性

- -

{{Compat("api.FileList")}}

- -

関連項目

- - diff --git a/files/ja/web/api/filelist/index.md b/files/ja/web/api/filelist/index.md new file mode 100644 index 0000000000..033ba967bd --- /dev/null +++ b/files/ja/web/api/filelist/index.md @@ -0,0 +1,174 @@ +--- +title: FileList +slug: Web/API/FileList +tags: + - API + - File API + - Files +translation_of: Web/API/FileList +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +

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

+ +
+

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

+
+ +

ファイルリストの使用

+ +

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

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

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

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

メソッドの概要

+ + + + + + + +
File item(index);
+ +

プロパティ

+ + + + + + + + + + + + + + +
属性型説明
lengthintegerリスト内のファイル数を示す読み取り専用の値。
+ +

メソッド

+ +

item()

+ +

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

+ +
 File item(
+   index
+ );
+
+ +
パラメータ
+ +
+
index
+
リストから扱うための 0 ベースのインデックス。
+
+ +
戻り値
+ +

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

+ +

例

+ +

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

+ +
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
+var fileInput = document.getElementById("myfileinput");
+
+// files は FileList オブジェクトです (NodeList に似ています)。
+var files = fileInput.files;
+var file;
+
+// files をくり返します。
+for (var i = 0; i < files.length; i++) {
+
+    // get item
+    file = files.item(i);
+    //or
+    file = files[i];
+
+    alert(file.name);
+}
+ +

完全な例はこちら。

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+<!-- multiple は複数のファイルを選択できるように設定されています。-->
+
+<input id="myfiles" multiple type="file">
+
+</body>
+
+<script>
+
+var pullfiles=function(){
+    // クエリセレクターが好き
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // files.length をキャッシュ
+    var fl = files.length;
+    var i = 0;
+
+    while ( i < fl) {
+        // ループ内のファイル var をローカライズする
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// input 要素の onchange を設定し pullfiles を呼び出すようにします。
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+</script>
+
+</html>
+ +

仕様

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

ブラウザの互換性

+ +

{{Compat("api.FileList")}}

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf