From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/filereader/abort/index.html | 59 +++++++ files/ja/web/api/filereader/abort_event/index.html | 175 +++++++++++++++++++++ files/ja/web/api/filereader/error/index.html | 54 +++++++ files/ja/web/api/filereader/error_event/index.html | 92 +++++++++++ files/ja/web/api/filereader/filereader/index.html | 59 +++++++ files/ja/web/api/filereader/index.html | 159 +++++++++++++++++++ files/ja/web/api/filereader/load_event/index.html | 171 ++++++++++++++++++++ .../ja/web/api/filereader/loadend_event/index.html | 173 ++++++++++++++++++++ .../web/api/filereader/loadstart_event/index.html | 173 ++++++++++++++++++++ files/ja/web/api/filereader/onabort/index.html | 16 ++ files/ja/web/api/filereader/onerror/index.html | 18 +++ files/ja/web/api/filereader/onload/index.html | 29 ++++ .../web/api/filereader/progress_event/index.html | 174 ++++++++++++++++++++ .../api/filereader/readasarraybuffer/index.html | 64 ++++++++ .../api/filereader/readasbinarystring/index.html | 89 +++++++++++ .../ja/web/api/filereader/readasdataurl/index.html | 133 ++++++++++++++++ files/ja/web/api/filereader/readastext/index.html | 63 ++++++++ files/ja/web/api/filereader/readystate/index.html | 94 +++++++++++ files/ja/web/api/filereader/result/index.html | 105 +++++++++++++ 19 files changed, 1900 insertions(+) create mode 100644 files/ja/web/api/filereader/abort/index.html create mode 100644 files/ja/web/api/filereader/abort_event/index.html create mode 100644 files/ja/web/api/filereader/error/index.html create mode 100644 files/ja/web/api/filereader/error_event/index.html create mode 100644 files/ja/web/api/filereader/filereader/index.html create mode 100644 files/ja/web/api/filereader/index.html create mode 100644 files/ja/web/api/filereader/load_event/index.html create mode 100644 files/ja/web/api/filereader/loadend_event/index.html create mode 100644 files/ja/web/api/filereader/loadstart_event/index.html create mode 100644 files/ja/web/api/filereader/onabort/index.html create mode 100644 files/ja/web/api/filereader/onerror/index.html create mode 100644 files/ja/web/api/filereader/onload/index.html create mode 100644 files/ja/web/api/filereader/progress_event/index.html create mode 100644 files/ja/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/ja/web/api/filereader/readasbinarystring/index.html create mode 100644 files/ja/web/api/filereader/readasdataurl/index.html create mode 100644 files/ja/web/api/filereader/readastext/index.html create mode 100644 files/ja/web/api/filereader/readystate/index.html create mode 100644 files/ja/web/api/filereader/result/index.html (limited to 'files/ja/web/api/filereader') diff --git a/files/ja/web/api/filereader/abort/index.html b/files/ja/web/api/filereader/abort/index.html new file mode 100644 index 0000000000..22e6d04195 --- /dev/null +++ b/files/ja/web/api/filereader/abort/index.html @@ -0,0 +1,59 @@ +--- +title: FileReader.abort() +slug: Web/API/FileReader/abort +tags: + - API + - File API + - FileReader + - Files + - Method + - Reference + - abort + - メソッド +translation_of: Web/API/FileReader/abort +--- +
{{APIRef("File API")}}
+ +

abort メソッドは読み取り操作を中止します。戻る時に、 {{domxref("FileReader.readyState","readyState")}} が DONE になります。

+ +

構文

+ +
instanceOfFileReader.abort();
+ +

例外

+ +
+
DOM_FILE_ABORT_ERR
+
読み込み操作が実行されていない間に abort が呼び出されたとき (つまり、状態が LOADING でないとき) にスローされます。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.abort")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/abort_event/index.html b/files/ja/web/api/filereader/abort_event/index.html new file mode 100644 index 0000000000..a9613ad6d9 --- /dev/null +++ b/files/ja/web/api/filereader/abort_event/index.html @@ -0,0 +1,175 @@ +--- +title: 'FileReader: abort イベント' +slug: Web/API/FileReader/abort_event +tags: + - API + - Event + - FileReader + - ProgressEvent + - Reference + - Web + - abort + - イベント +translation_of: Web/API/FileReader/abort_event +--- +
{{APIRef}}
+ +

abort イベントは、読み込みが中断されたときに発生します。つまり、プログラムが {{domxref("FileReader.abort()")}} を呼び出したためです。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onabort")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+    reader.abort();
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-abort-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.abort_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/error/index.html b/files/ja/web/api/filereader/error/index.html new file mode 100644 index 0000000000..3449d35eb7 --- /dev/null +++ b/files/ja/web/api/filereader/error/index.html @@ -0,0 +1,54 @@ +--- +title: FileReader.error +slug: Web/API/FileReader/error +tags: + - API + - File API + - Reference + - ファイル + - プロパティ +translation_of: Web/API/FileReader/error +--- +
{{APIRef("File API")}}
+ +

{{domxref("FileReader")}} の error プロパティは、ファイルの読み取り中に発生したエラーを返します。

+ +

構文

+ +
var error = instanceOfFileReader.error
+
+ +

値

+ +

{{domxref("DOMError")}} に関連するエラーが含まれています。 Chrome 48+/Firefox 58+ では、 DOMError が DOM 標準から削除されているため、このプロパティは {{domxref("DOMException")}} を返します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.error")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/error_event/index.html b/files/ja/web/api/filereader/error_event/index.html new file mode 100644 index 0000000000..e7f7933599 --- /dev/null +++ b/files/ja/web/api/filereader/error_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'FileReader: error イベント' +slug: Web/API/FileReader/error_event +tags: + - API + - Error + - Event + - FileReader + - ProgressEvent + - Reference + - Web + - onerror + - イベント +translation_of: Web/API/FileReader/error_event +--- +
{{APIRef}}
+ +

error イベントは、エラーによって読み取りが失敗したとき (例えば、ファイルが見つからなかった場合や読み取り可能ではなかった場合) に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onerror")}}
+ +

例

+ +
const fileInput = document.querySelector('input[type="file"]');
+const reader = new FileReader();
+
+function handleSelected(e) {
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+
+        reader.addEventListener('error', () => {
+            console.error(`Error occurred reading file: ${selectedFile.name}`);
+        });
+
+        reader.addEventListener('load', () => {
+            console.error(`File: ${selectedFile.name} read successfully`);
+        });
+
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-error-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.error_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/filereader/index.html b/files/ja/web/api/filereader/filereader/index.html new file mode 100644 index 0000000000..1579979068 --- /dev/null +++ b/files/ja/web/api/filereader/filereader/index.html @@ -0,0 +1,59 @@ +--- +title: FileReader() +slug: Web/API/FileReader/FileReader +tags: + - API + - Constructor + - FileReader + - Reference +translation_of: Web/API/FileReader/FileReader +--- +

FileReader() コンストラクタは、新しい FileReader を作成します。

+ +

FileReader の使用方法の詳細については、Web アプリケーションからのファイルの使用 を参照してください。

+ +

シンタックス

+ +
var reader = new FileReader();
+ +

パラメータ

+ +

なし

+ +

例

+ +

次のコードスニペットは、FileReader() コンストラクタを使用した FileReader オブジェクトの作成と、その後のオブジェクトの使用法を示しています。

+ +
function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('File API')}}{{Spec2('File API')}}初期定義
+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/index.html b/files/ja/web/api/filereader/index.html new file mode 100644 index 0000000000..8d8d799866 --- /dev/null +++ b/files/ja/web/api/filereader/index.html @@ -0,0 +1,159 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - DOM + - File API + - FileReader + - Files + - Interface + - Reference + - インターフェイス +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

FileReader オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。{{domxref("File")}} または {{domxref("Blob")}} オブジェクトを使用して、読み込むファイルまたはデータを指定します。

+ +

File オブジェクトは、{{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、または {{domxref("HTMLCanvasElement")}} 上の mozGetAsFile() API から取得することができます。

+ +
+

重要事項: FileReader は、ユーザーの (リモートの) システムから安全な方法でのみファイルの内容を読み取るために使用されます。単にファイルシステムからパス名でファイルを読み込むためには使用できません。JavaScript でパス名でファイルを読み込むには、標準的な Ajax ソリューションを使用してサーバーサイドのファイル読み込みを行い、クロスドメインでファイルを読み込む場合は CORS パーミッションを使用しなければなりません。

+
+ +

{{AvailableInWorkers}}

+ +

コンストラクター

+ +
+
{{domxref("FileReader.FileReader", "FileReader()")}}
+
新しく作成された FileReader を返します。
+
+ +

詳細や例については Web アプリケーションからのファイルの使用 を参照してください。

+ +

プロパティ

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
ファイルの読み込み中に発生したエラーを表す {{domxref("DOMException")}}。
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
FileReader の状態を示す数値。以下のいずれかになります。 + + + + + + + + + + + + + + + + + + +
EMPTY0まだデータは読み込まれていません。
LOADING1データは現在読み込み中です。
DONE2読込リクエストがすべて終了しました。
+
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データのフォーマットは、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。
+
+ +

イベントハンドラ

+ +
+
{{domxref("FileReader.onabort")}}
+
{{event("abort")}} イベントのハンドラです。このイベントは、読み込み操作が中止されるたびにトリガされます。
+
{{domxref("FileReader.onerror")}}
+
{{event("error")}} イベントのハンドラです。このイベントは、読み込み操作がエラーになるたびにトリガされます。
+
{{domxref("FileReader.onload")}}
+
{{event("load")}} イベントのハンドラです。このイベントは、読み込み操作が正常に完了するたびにトリガされます。
+
{{domxref("FileReader.onloadstart")}}
+
{{event("loadstart")}} イベントのハンドラです。このイベントは、読み込みが開始されるたびにトリガされます。
+
{{domxref("FileReader.onloadend")}}
+
{{event("loadend")}} イベントのハンドラです。このイベントは、 (成功または失敗のいずれかで) 読み込み操作が完了するたびにトリガされます。
+
{{domxref("FileReader.onprogress")}}
+
{{event("progress")}} イベントのハンドラです。このイベントは、{{domxref("Blob")}} コンテンツの読み込み中に発生します。
+
+ +
+

FileReader は {{domxref("EventTarget")}} を継承しているので、{{domxref("EventTarget.addEventListener()", "addEventListener")}} メソッドを使用することで、これらのイベントをすべて待ち受けることもできます。

+
+ +

メソッド

+ +
+
{{domxref("FileReader.abort()")}}
+
読込処理を中断します。結果として readyState は DONE に変わります。
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+
指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、result 属性にファイルのデータを表す {{domxref("ArrayBuffer")}} が格納されます。
+
{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}
+
指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、result 属性にはファイルからの生のバイナリデータが文字列として格納されます。
+
{{domxref("FileReader.readAsDataURL()")}}
+
指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、result 属性にはファイルのデータを表す data: の URL が格納されます。
+
{{domxref("FileReader.readAsText()")}}
+
指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると result 属性にファイルの内容がテキスト文字列として格納されます。オプションでエンコーディング名を指定することができます。
+
+ +

イベント

+ +

{{domxref("EventTarget/addEventListener", "addEventListener()")}} を使用するか、このインターフェイスの onイベント名 プロパティにイベントリスナーを代入するかして、これらのイベントを待ち受けます。

+ +
+
{{domxref("FileReader/abort_event", "abort")}}
+
プログラムが {{domxref("FileReader.abort()")}} を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。
+ {{domxref("FileReader/onabort", "onabort")}} プロパティ経由でも利用できます。
+
{{domxref("FileReader/error_event", "error")}}
+
エラーのために読み取りが失敗したときに発生します。
+ {{domxref("FileReader/onerror", "onerror")}} プロパティ経由でも利用できます。
+
{{domxref("FileReader/load_event", "load")}}
+
読み取りが正常に完了したときに発生します。
+ {{domxref("FileReader/onload", "onload")}} プロパティ経由でも利用できます。
+
{{domxref("FileReader/loadend_event", "loadend")}}
+
正常かどうかにかかわらず、読み取りが完了したときに発生します。
+ {{domxref("FileReader/onloadend", "onloadend")}} プロパティ経由でも利用できます。
+
{{domxref("FileReader/loadstart_event", "loadstart")}}
+
読み取りが開始されたときに発生します。
+ {{domxref("FileReader/onloadstart", "onloadstart")}} プロパティ経由でも利用できます。
+
{{domxref("FileReader/progress_event", "progress")}}
+
データの読み取り時に定期的に発生します。
+ {{domxref("FileReader/onprogress", "onprogress")}} プロパティ経由でも利用できます。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#dfn-filereader", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの対応

+ + + +

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

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/load_event/index.html b/files/ja/web/api/filereader/load_event/index.html new file mode 100644 index 0000000000..2cbb63289a --- /dev/null +++ b/files/ja/web/api/filereader/load_event/index.html @@ -0,0 +1,171 @@ +--- +title: 'FileReader: load イベント' +slug: Web/API/FileReader/load_event +tags: + - API + - Event + - FileReader + - Web + - load +translation_of: Web/API/FileReader/load_event +--- +
{{APIRef}}
+ +

load イベントは、ファイルが正常に読み込めたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onload")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-load-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.load_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/loadend_event/index.html b/files/ja/web/api/filereader/loadend_event/index.html new file mode 100644 index 0000000000..68cfad88f5 --- /dev/null +++ b/files/ja/web/api/filereader/loadend_event/index.html @@ -0,0 +1,173 @@ +--- +title: 'FileReader: loadend イベント' +slug: Web/API/FileReader/loadend_event +tags: + - API + - Event + - FileReader + - ProgressiveEvent + - Web + - loadend + - イベント +translation_of: Web/API/FileReader/loadend_event +--- +
{{APIRef}}
+ +

loadend イベントは、ファイル読み込みが、成功したかどうかにかかわらず完了したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onloadend")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-loadend-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.loadend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/loadstart_event/index.html b/files/ja/web/api/filereader/loadstart_event/index.html new file mode 100644 index 0000000000..8704e42c03 --- /dev/null +++ b/files/ja/web/api/filereader/loadstart_event/index.html @@ -0,0 +1,173 @@ +--- +title: 'FileReader: loadstart イベント' +slug: Web/API/FileReader/loadstart_event +tags: + - API + - Event + - FileReader + - ProgressEvent + - Web + - loadstart + - イベント +translation_of: Web/API/FileReader/loadstart_event +--- +
{{APIRef}}
+ +

loadstart イベントは、ファイル読み込み操作が始まったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onloadstart")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-loadstart-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.loadstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/onabort/index.html b/files/ja/web/api/filereader/onabort/index.html new file mode 100644 index 0000000000..7c2c2d0d0a --- /dev/null +++ b/files/ja/web/api/filereader/onabort/index.html @@ -0,0 +1,16 @@ +--- +title: FileReader.onabort +slug: Web/API/FileReader/onabort +tags: + - Event Handler + - File + - FileReader + - Property + - Reference +translation_of: Web/API/FileReader/onabort +--- +

FileReader.onabort プロパティには、abort イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。

+ +

シンタックス

+ +
reader.onabort = function() { ... };
diff --git a/files/ja/web/api/filereader/onerror/index.html b/files/ja/web/api/filereader/onerror/index.html new file mode 100644 index 0000000000..27b1cafbfa --- /dev/null +++ b/files/ja/web/api/filereader/onerror/index.html @@ -0,0 +1,18 @@ +--- +title: onerror +slug: Web/API/FileReader/onerror +translation_of: Web/API/FileReader/onerror +--- +

FileReader の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから instanceOfFileReader.error のようにアクセスすることができます。

+ +
// <input type="file" onchange="onChange(event)"> からのコールバック
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onerror = function(event) {
+    alert("ファイルの読み込みに失敗しました。\n\n" + reader.error);
+    reader.abort(); // (...これは onerror ハンドラで何か有用なことをするのでしょうか？)
+  };
+
+  reader.readAsText(file);
+}
diff --git a/files/ja/web/api/filereader/onload/index.html b/files/ja/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..cee0e907f9 --- /dev/null +++ b/files/ja/web/api/filereader/onload/index.html @@ -0,0 +1,29 @@ +--- +title: FileReader.onload +slug: Web/API/FileReader/onload +tags: + - Event Handler + - File + - FileReader + - Property + - Reference +translation_of: Web/API/FileReader/onload +--- +

{{APIRef}}

+ +

FileReader.onload プロパティは、readAsArrayBuffer や readAsBinaryString、 readAsDataURL、readAsText でのコンテンツ読み込みが完了して、利用可能になると発火する {{event('load')}} イベント時に実行されるイベントハンドラを含みます。

+ +

例

+ +
// <input type="file" onchange="onChange(event)"> からのコールバック
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // ファイルのテキストがここにプリントされる
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/ja/web/api/filereader/progress_event/index.html b/files/ja/web/api/filereader/progress_event/index.html new file mode 100644 index 0000000000..b628614784 --- /dev/null +++ b/files/ja/web/api/filereader/progress_event/index.html @@ -0,0 +1,174 @@ +--- +title: 'FileReader: progress イベント' +slug: Web/API/FileReader/progress_event +tags: + - API + - Event + - FileReader + - ProgressEvent + - Reference + - Web + - progress + - イベント +translation_of: Web/API/FileReader/progress_event +--- +
{{APIRef}}
+ +

progress イベントは、 FileReader がデータを読むときに定期的に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("FileReader.onprogress")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('File API', '#dfn-progress-event')}}{{Spec2('File API')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.FileReader.progress_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/readasarraybuffer/index.html b/files/ja/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..ae75e25f13 --- /dev/null +++ b/files/ja/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,64 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - API + - DOM + - File API + - FileReader + - Files + - Method + - Reference + - readAsArrayBuffer +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

{{domxref("FileReader")}} インターフェイスの readAsArrayBuffer() メソッドは、指定された {{domxref("Blob")}} ないし {{domxref("File")}} オブジェクトの内容を読み込むために使用します。読み込み処理が終了すると {{domxref("FileReader.readyState","readyState")}} が DONE に変わり、 {{domxref("FileReader/loadend_event", "loadend")}} イベントが発行されます。それと同時に、 {{domxref("FileReader.result","result")}} プロパティにはファイルのデータを表す {{domxref("ArrayBuffer")}} が格納されます。

+ +
+

より新しい API が利用可能です
+ {{domxref("Blob.arrayBuffer()")}} メソッドは、ファイルを ArrayBuffer として読み取るための Promise ベースのより新しい API です。

+
+ +

構文

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

引数

+ +
+
blob
+
メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.readAsArrayBuffer")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/readasbinarystring/index.html b/files/ja/web/api/filereader/readasbinarystring/index.html new file mode 100644 index 0000000000..2c0899a89b --- /dev/null +++ b/files/ja/web/api/filereader/readasbinarystring/index.html @@ -0,0 +1,89 @@ +--- +title: FileReader.readAsBinaryString() +slug: Web/API/FileReader/readAsBinaryString +tags: + - API + - File API + - Files + - Method + - Reference +translation_of: Web/API/FileReader/readAsBinaryString +--- +

{{APIRef("File API")}}

+ + + +

readAsBinaryString メソッドは、 指定された {{domxref("Blob")}} ないし {{domxref("File")}} オブジェクトを読み込むために使用します。 読込処理が終了すると {{domxref("FileReader.readyState","readyState")}} は DONE に変わり、{{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが生じます。それと同時に {{domxref("FileReader.result","result")}} プロパティには生のバイナリデータを文字列で解釈したものが格納されます。

+ +

このメソッドは、File API の仕様から一度削除されましたが、後方互換のために再導入されました。
+ {{domxref("FileReader.readAsArrayBuffer()")}} の使用が推奨されています。

+ +

構文

+ +
instanceOfFileReader.readAsBinaryString(blob);
+ +

パラメータ

+ +
+
blob
+
メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。
+
+ +

例

+ +
var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}{{Spec2('File API')}}
+ +

ブラウザ実装状況

+ + + +

{{Compat("api.FileReader.readAsBinaryString")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/filereader/readasdataurl/index.html b/files/ja/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..cd53d210e4 --- /dev/null +++ b/files/ja/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,133 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - API + - Base 64 + - File API + - FileReader + - Files + - Method + - Reference + - メソッド +translation_of: Web/API/FileReader/readAsDataURL +--- +

readAsDataURL メソッドは、指定された{{domxref("Blob")}} または {{domxref("File")}} の内容を読み込むために使用されます。読み込み操作が終了すると、{{domxref("FileReader.readyState", "readyState")}} が DONE となり、{{event("loadend")}} が発生します。このとき、{{domxref("FileReader.result", "result")}} 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。

+ +
+

メモ: blob の {{domxref("FileReader.result","result")}} は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。

+
+ +

構文

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

引数

+ +
+
blob
+
メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。
+
+ +

例

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="画像のプレビュー...">
+ +

JavaScript

+ +
function previewFile() {
+  const preview = document.querySelector('img');
+  const file = document.querySelector('input[type=file]').files[0];
+  const reader = new FileReader();
+
+  reader.addEventListener("load", function () {
+    // 画像ファイルを base64 文字列に変換します
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}
+ +

ライブ結果

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

複数ファイルを読み取る例

+ +

HTML

+ +
<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+ +

JavaScript

+ +
function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // `file.name` が拡張子の基準と一致していることを確認します。
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+ +
メモ: Internet Explorer 10 以前では FileReader() コンストラクターに対応していません。十分な互換性が必要とされるときは crossbrowser possible solution for image preview または this more powerful example を参照してください。
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.readAsDataURL")}}

+ +

あわせて参照

+ + + +
{{APIRef("File API")}}
diff --git a/files/ja/web/api/filereader/readastext/index.html b/files/ja/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..5f9109dcc0 --- /dev/null +++ b/files/ja/web/api/filereader/readastext/index.html @@ -0,0 +1,63 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - API + - File API + - Reference + - ファイル + - メソッド +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

readAsText() メソッドは、指定された {{domxref("Blob")}} または {{domxref("File")}} の内容を読み取るために使用します。読み取り操作が完了すると、 {{domxref("FileReader.readyState","readyState")}} が DONE に変わり、 {{event("loadend")}} イベントが発生し、 {{domxref("FileReader.result","result")}} プロパティにはファイルの内容が文字列として格納されます。

+ +
+

より新しい API が利用できます
+ {{domxref("Blob.text()")}} メソッドは、ファイルをテキストとして読み取るための新しい Promise ベースの API です。

+
+ +

構文

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

引数

+ +
+
blob
+
メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。
+
encoding {{optional_inline}}
+
読込の際に使用する文字エンコーディングを指定する文字列です。この引数が指定されなかった場合は UTF-8 で解釈されます。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.readAsText")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/readystate/index.html b/files/ja/web/api/filereader/readystate/index.html new file mode 100644 index 0000000000..4e7b2916d2 --- /dev/null +++ b/files/ja/web/api/filereader/readystate/index.html @@ -0,0 +1,94 @@ +--- +title: FileReader.readyState +slug: Web/API/FileReader/readyState +tags: + - API + - File API + - Reference + - ファイル + - プロパティ +translation_of: Web/API/FileReader/readyState +--- +
{{APIRef("File API")}}
+ +

{{domxref("FileReader")}} の readyState プロパティは、 FileReader がいる読み取り操作の現在の状態を提供します。 FileReader は以下のいずれかの状態にあります。

+ + + + + + + + + + + + + + + + + + + + + + + + +
値状態説明
0EMPTYReader が作成されました。まだ読み込まれているメソッドはありません。
1LOADINGread メソッドが呼び出されました。
2DONE操作が完了しています。
+ +
+
EMPTY
+
FileReader は作成されましたが、 readAs メソッドはまだ呼び出されていません。
+
LOADING
+
readAs メソッドが呼び出されました。 {{domxref("File")}} または {{domxref("Blob")}} が読み取り中であり、まだエラーは発生していません。
+
DONE
+
読み取り操作が完了しています。これは、 {{domxref("File")}} または {{domxref("Blob")}} の全体がメモリに読み込まれたか、ファイル読み取りエラーが発生したか、 {{domxref("FileReader.abort()", "abort()")}} が呼び出され、読み取りがキャンセルされたか、いずれかを意味します。
+
+ +

例

+ +
var reader = new FileReader();
+console.log('EMPTY', reader.readyState); // readyState は 0 になります。
+reader.readAsText(blob);
+console.log('LOADING', reader.readyState); // readyState は 1 になります。
+
+reader.onloadend = function () {
+  console.log('DONE', reader.readyState); // readyState は 2 になります。};
+
+ +

値

+ +

{{domxref("FileReader")}} API のために定義されている3つの状態定数のうちの1つです。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.readyState")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/filereader/result/index.html b/files/ja/web/api/filereader/result/index.html new file mode 100644 index 0000000000..5d42ceca55 --- /dev/null +++ b/files/ja/web/api/filereader/result/index.html @@ -0,0 +1,105 @@ +--- +title: FileReader.result +slug: Web/API/FileReader/result +tags: + - API + - File API + - FileReader + - Reference + - result + - ファイル + - プロパティ +translation_of: Web/API/FileReader/result +--- +
{{APIRef("File API")}}
+ +

{{domxref("FileReader")}} の result プロパティは、ファイルの内容を返します。このプロパティは、読み取り操作が完了した後でのみ有効で、データの形式は、読み取り操作を開始するために使用されたメソッドによって異なります。

+ +

構文

+ +
var file = instanceOfFileReader.result
+
+ +

値

+ +

読み取り操作を開始するためにどの読み取りメソッドが使用されたかに基づく、適切な文字列または {{jsxref("ArrayBuffer")}} です。読み取りがまだ完了していないか、失敗した場合は、値は null になります。

+ +

結果の型は以下に記載されています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
メソッド説明
{{domxref("FileReader/readAsArrayBuffer", "readAsArrayBuffer()")}}result はバイナリデータを含む JavaScript の {{jsxref("Global_Objects/ArrayBuffer", "ArrayBuffer")}} になります。
{{domxref("FileReader/readAsBinaryString", "readAsBinaryString()")}}result にはファイルからの生のバイナリデータが文字列で格納されます。
{{domxref("FileReader/readAsDataURL", "readAsDataURL()")}}result はファイルのデータを表す data: URL の文字列になります。
{{domxref("FileReader/readAsText", "readAsText()")}}result は文字列のテキストです。
+ +

例

+ +

この例は、ファイル入力からファイルを読み込む関数 read() を示しています。これは {{domxref("FileReader")}} オブジェクトを作成し、 {{domxref("FileReader/load_event", "load")}} イベントのリスナーを作成し、ファイルが読み込まれるとその result を取得し、提供されたコールバック関数を read() に渡すことによって機能します。

+ +

内容は生のテキストデータとして扱われます。

+ +
var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+  var file = fileInput.files.item(0);
+  var reader = new FileReader();
+
+  reader.onload = function() {
+    callback(reader.result);
+  }
+
+  reader.readAsText(file);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.FileReader.result")}}

+ +

あわせて参照

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