From 95e1c12bd5362a61076119ef9289a8b68167e34b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 27 Dec 2021 23:21:42 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../using_files_from_web_applications/index.md | 492 +++++++++++---------- 1 file changed, 259 insertions(+), 233 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/api/file/using_files_from_web_applications/index.md b/files/ja/web/api/file/using_files_from_web_applications/index.md index 07228aabd8..7409fc451e 100644 --- a/files/ja/web/api/file/using_files_from_web_applications/index.md +++ b/files/ja/web/api/file/using_files_from_web_applications/index.md @@ -1,105 +1,113 @@ --- -title: Web アプリケーションからのファイルの使用 +title: ウェブアプリケーションからのファイルの使用 slug: Web/API/File/Using_files_from_web_applications tags: - - Files + - ファイル - HTML5 - - Intermediate - - NeedsUpdate - - ajax upload - - upload + - 中級者 + - 要更新 + - ajax アップロード + - アップロード translation_of: Web/API/File/Using_files_from_web_applications --- -
{{APIRef("File API")}}
+{{APIRef("File API")}} -

HTML5 から DOM に追加された File API によって、ウェブコンテンツがユーザーにローカルファイルを選択するように指示し、それらのファイルを読み取れるようになりました。この選択は HTML の {{HTMLElement("input/file", '<input type="file">')}} 要素か、ドラッグ＆ドロップのどちらかを使用することで行うことができます。

+File API は DOM に HTML5 で追加されたもので、ウェブコンテンツがユーザーにローカルファイルを選択するように指示し、それらのファイルを読み取ることができるようになりました。この選択は HTML の `{{HTMLElement("input/file", '<input type="file">')}}` 要素を使用したり、ドラッグ＆ドロップを行ったりすることで行うことができます。 -

File API を拡張機能や他の chrome コードから利用することもできます。この場合、もういくつか知っておきたい機能があります。詳細は DOM File API を chrome code で使う をご覧下さい。

+File API を拡張機能や他のクロームコードから利用することもできます。この場合、もういくつか知っておきたい機能があります。詳細は [DOM File API をクロームコードで使う](/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code)をご覧下さい。 -

選択されたファイルへのアクセス

+## 選択されたファイルへのアクセス -

この HTML を見てください。

+この HTML を考えてください。 -
<input type="file" id="input">
+```html + +``` -

File API では、ユーザーが選択したファイルを表す {{DOMxRef("File")}} オブジェクトを含む {{DOMxRef("FileList")}} にアクセスすることができます。

+File API により、ユーザーが選択したファイルを表す {{DOMxRef("File")}} オブジェクトを含む {{DOMxRef("FileList")}} にアクセスすることができます。 -

input 要素の multiple 属性により、複数のファイルを選択することができます。

+`multiple` 属性を `input` 要素に付けることで、ユーザーが複数のファイルを選択することができるようになります。 -

旧来の DOM セレクターを使って、最初に選択されたファイルにアクセスします。

+旧来の DOM セレクターを使って、最初に選択されたファイルにアクセスします。 -
const selectedFile = document.getElementById('input').files[0];
+```js +const selectedFile = document.getElementById('input').files[0]; +``` -

change イベントでの選択されたファイルへのアクセス

+### change イベントでの選択されたファイルへのアクセス -

change イベントを通して {{DOMxRef("FileList")}} にアクセスすることも可能です (ただし必須ではありません)。このように {{DOMxRef("EventTarget.addEventListener()")}} を使って change イベントのリスナーを追加する必要があります。

+`change` イベントを通して {{DOMxRef("FileList")}} にアクセスすることもできます (ただし必須ではありません)。このように {{DOMxRef("EventTarget.addEventListener()")}} を使って `change` イベントのリスナーを追加する必要があります。 -
const inputElement = document.getElementById("input");
+```js
+const inputElement = document.getElementById("input");
 inputElement.addEventListener("change", handleFiles, false);
 function handleFiles() {
   const fileList = this.files; /* ファイルリストを処理するコードがここに入る */
-}
+} +``` -

選択されたファイルについての情報の取得

+## 選択されたファイルについての情報の取得 -

DOM が提供する {{DOMxRef("FileList")}} オブジェクトは、{{DOMxRef("File")}} オブジェクトとして指定された、ユーザーが選択したすべてのファイルをリストアップします。ファイルリストの length 属性の値をチェックすることで、ユーザーが選択したファイルの数を知ることができます。

+DOM が提供する {{DOMxRef("FileList")}} オブジェクトは、{{DOMxRef("File")}} オブジェクトとして指定された、ユーザーが選択したすべてのファイルをリストアップします。ファイルリストの `length` 属性の値をチェックすることで、ユーザーが選択したファイルの数を知ることができます。 -
const numFiles = fileList.length;
+```js +const numFiles = fileList.length; +``` -

個々の {{DOMxRef("File")}} オブジェクトは、単に配列としてリストにアクセスするだけで取得できます。

+個々の {{DOMxRef("File")}} オブジェクトは、単に配列としてリストにアクセスするだけで取得できます。 -
for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
+```js
+for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
   const file = fileList[i];
   // ...
 }
-
- -

このループは、ファイルリスト内のすべてのファイルを繰り返し処理します。

- -

{{DOMxRef("File")}} オブジェクトには3つのプロパティがあり、ファイルに関する有益な情報を得られます。

- -
-
name
-
読み取り専用の文字列としてのファイル名。これはファイル名のみで、パスに関する情報は含まれていません。
-
size
-
読み取り専用の64ビット整数によるバイト単位のファイルサイズです。
-
type
-
読み取り専用の文字列としてのファイルの MIME タイプ (読み取り専用)。MIME タイプが特定できないときは空文字列 ("") となります。
-
- -

例: ファイルサイズを表示

- -

次のコードは size プロパティを利用する例です。

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>File(s) size</title>
-</head>
-
-<body>
-  <form name="uploadForm">
-    <div>
-      <input id="uploadInput" type="file" name="myFiles" multiple>
-      選択されたファイル: <span id="fileNum">0</span>;
-      合計サイズ: <span id="fileSize">0</span>
-    </div>
-    <div><input type="submit" value="Send file"></div>
-  </form>
-
-  <script>
+```
+
+このループは、ファイルリスト内のすべてのファイルを繰り返し処理します。
+
+{{DOMxRef("File")}} オブジェクトには 3 つのプロパティがあり、ファイルに関する有益な情報を得られます。
+
+- `name`
+  - : 読み取り専用の文字列としてのファイル名。これはファイル名のみで、パスに関する情報は含まれていません。
+- `size`
+  - : 読み取り専用の 64 ビット整数によるバイト単位のファイルサイズです。
+- `type`
+  - : 読み取り専用の文字列としてのファイルの MIME タイプです。MIME タイプが特定できないときは空文字列 (`""`) となります。
+
+### 例: ファイルサイズを表示
+
+次のコードは `size` プロパティを利用する例です。
+
+```html
+
+
+
+  
+  ファイルのサイズ
+
+
+
+  

+    

+      
+      選択されたファイル: 0;
+      合計サイズ: 0
+    

+    

+  

+
+  
+
+
+```
 
-
click() メソッドを使い input 要素を隠す

+## click() メソッドを使用して非表示の input 要素を使用する
 
-
見た目の悪い {{HTMLElement("input")}} 要素を隠し、独自のインターフェイスでファイル選択を開き、ユーザーが選択したファイルを表示することができます。 input 要素のスタイルを display: none とし、その上で {{DOMxRef("HTMLElement.click","click()")}} メソッドを {{HTMLElement("input")}} に対して呼び出すことで実現できます。

+見た目の悪い {{HTMLElement("input")}} 要素を非表示にし、独自のインターフェイスでファイル選択を開き、ユーザーが選択したファイルを表示することができます。 input 要素のスタイルを `display: none` とし、その上で {{DOMxRef("HTMLElement.click","click()")}} メソッドを {{HTMLElement("input")}} に対して呼び出すことで実現できます。
 
-
次のような HTML を考えてみましょう。

+次のような HTML を考えてみましょう。
 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
-<button id="fileSelect">いくつかのファイルを選択します。</button>

+```html
+
+
+```
 
-
click イベントを扱うコードは次のようなものです。

+`click` イベントを扱うコードは次のようなものです。
 
-
const fileSelect = document.getElementById("fileSelect"),
+```js
+const fileSelect = document.getElementById("fileSelect"),
   fileElem = document.getElementById("fileElem");
 
 fileSelect.addEventListener("click", function (e) {
@@ -132,22 +143,25 @@ fileSelect.addEventListener("click", function (e) {
     fileElem.click();
   }
 }, false);
-

+```
 
-
ファイル選択を開く新しいボタンは、好きなようにスタイル付けできます。

+ファイル選択を開くための新しいボタンは、好きなようにスタイル付けできます。
 
-
label 要素を使用して隠した file input 要素を起動

+## label 要素を使用して非表示の file input 要素を起動
 
-
JavaScript (click() メソッド) を使用せずにファイルピッカーを開けるようにするために、 {{HTMLElement("label")}} 要素を使用します。この場合、もし入力エレメントの display: none (または visibility: hidden) を設定して非表示に設定すると、ラベルがキーボードからアクセスできなくなります。代わりに、視覚的に非表示にする手法 (visually-hidden technique) を使用します。

+JavaScript (click() メソッド) を使用せずにファイル選択を開けるようにするために、 {{HTMLElement("label")}} 要素を使用します。この場合、 input 要素に `display: none` (または `visibility: hidden`) を設定して非表示に設定すると、ラベルがキーボードからアクセスできなくなります。代わりに、視覚的に非表示にする手法 ([visually-hidden technique](https://a11yproject.com/posts/how-to-hide-content/)) を使用します。
 
-
次の HTMLを見てください。

+次の HTML を見てください。
 
-
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
-<label for="fileElem">いくつかのファイルを選択します。</label>

+```html
+
+
+```
 
-
そしてこの CSS です。

+そしてこの CSS です。
 
-
.visually-hidden {
+```css
+.visually-hidden {
   position: absolute !important;
   height: 1px;
   width: 1px;
@@ -162,29 +176,31 @@ input.visually-hidden:focus + label {
 input.visually-hidden:focus-within + label {
   outline: thin dotted;
 }
-

+```
 
-
fileElem.click()を呼び出すための JavaScript コードを追加する必要はありません。またこの場合は、ラベル要素のスタイルを希望どおりに設定することもできます。前例のようにアウトラインに設定したり、background-color、box-shadow を設定したりして、ラベルの非表示入力フィールドのフォーカスステータスを視覚的に示す必要があります。(この記事を書いている時点では、Firefox は<input type="file"> 要素に対してこの視覚的な手がかりを表示していません)

+JavaScript コードを追加して `fileElem.click()` を呼び出す必要はありません。またこの場合は、ラベル要素のスタイルを希望どおりに設定することもできます。前例のようにアウトラインに設定したり、background-color や box-shadow を設定したりして、ラベルの非表示入力フィールドのフォーカスステータスを視覚的に示す必要があります。(この記事を書いている時点では、Firefox は `` 要素に対してこの視覚的な手がかりを表示していません。)
 
-
ドラッグ & ドロップを使用したファイルの選択

+## ドラッグ＆ドロップを使用したファイルの選択
 
-
ユーザーがファイルをウェブアプリケーションにドラッグ & ドロップすることもできます。

+ユーザーがファイルをウェブアプリケーションにドラッグ＆ドロップすることもできます。
 
-
最初のステップは、ドロップゾーンを確立することです。コンテンツのどの部分がドロップを受け入れるかは、アプリケーションの設計によって異なりますが、要素をドロップイベントを受け取るのは簡単です。

+最初のステップは、ドロップゾーンを確立することです。コンテンツのどの部分がドロップを受け入れるかは、アプリケーションの設計によって異なりますが、要素をドロップイベントを受け取るのは簡単です。
 
-
let dropbox;
+```js
+let dropbox;
 
 dropbox = document.getElementById("dropbox");
 dropbox.addEventListener("dragenter", dragenter, false);
 dropbox.addEventListener("dragover", dragover, false);
 dropbox.addEventListener("drop", drop, false);
-

+```
 
-
この例では、ID dropbox を持つ要素をドロップゾーンに指定しています。これは、{{event('dragenter')}}、{{event('dragover')}}、および {{event('drop')}} イベントのリスナーを追加することで行われます。

+この例では、ID `dropbox` を持つ要素をドロップゾーンに指定しています。これは、{{domxref('Document/dragenter_event', 'dragenter')}}、{{domxref('Document/dragover_event', 'dragover')}}、{{domxref('Document/drop_event', 'drop')}} の各イベントのリスナーを追加することで行われます。
 
-
実際には、この場合、dragenterとdragoverのイベントでは何もする必要はありませんので、これらの関数はどちらも簡単です。これらの関数はイベントの伝播を停止し、デフォルトのアクションが発生しないようにするだけです。

+実際には、この場合、 `dragenter` と `dragover` のイベントでは何もする必要はありませんので、これらの関数はどちらも簡単です。これらの関数はイベントの伝播を停止し、既定のアクションが発生しないようにするだけです。
 
-
function dragenter(e) {
+```js
+function dragenter(e) {
   e.stopPropagation();
   e.preventDefault();
 }
@@ -193,11 +209,12 @@ function dragover(e) {
   e.stopPropagation();
   e.preventDefault();
 }
-

+```
 
-
本当の魔術は drop() 関数の中で起こります。

+本当の魔法は `drop()` 関数の中で起こります。
 
-
function drop(e) {
+```js
+function drop(e) {
   e.stopPropagation();
   e.preventDefault();
 
@@ -206,16 +223,17 @@ function dragover(e) {
 
   handleFiles(files);
 }
-

+```
 
-
ここでは、イベントから dataTransfer フィールドを取得し、そこからファイルリストを取得し、それを handleFiles() に渡します。これより先は、ユーザーが入力要素を使用したかドラッグ & ドロップを使用するかどうかにかかわらず、ファイルの処理方法は全く同じです。

+ここでは、イベントから `dataTransfer` フィールドを取得し、そこからファイルリストを取得し、それを `handleFiles()` に渡します。これより先は、ユーザーが入力要素を使用したかドラッグ＆ドロップを使用するかどうかにかかわらず、ファイルの処理方法は全く同じです。
 
-
例: ユーザが選択した画像のサムネイルを表示

+## 例: ユーザーが選択した画像のサムネイルを表示
 
-
次の素晴らしい写真共有サイトを開発していて、ユーザーが実際に画像をアップロードする前に HTML を使って画像のサムネイルプレビューを表示させたいとしましょう。前に説明したように input 要素やドロップゾーンを設定し、次の handleFiles() のような関数を呼び出せば良いのです。

+次の素晴らしい写真共有サイトを開発していて、ユーザーが実際に画像をアップロードする前に HTML を使って画像のサムネイルプレビューを表示させたいとしましょう。前に説明したように `input` 要素やドロップゾーンを設定し、次の `handleFiles()` のような関数を呼び出せば良いのです。
 
-
function handleFiles(files) {
-  for (let i = 0; i < files.length; i++) {
+```js
+function handleFiles(files) {
+  for (let i = 0; i < files.length; i++) {
     const file = files[i];
 
     if (!file.type.startsWith('image/')){ continue }
@@ -230,44 +248,50 @@ function dragover(e) {
     reader.readAsDataURL(file);
   }
 }
-

+```
 
-
ここでは、ユーザーが選択したファイルを処理するループが各ファイルの type 属性を見て、その MIME タイプが文字列 "image/" で始まるかどうかを確認しています)。画像である各ファイルに対して、新しい img 要素を作成します。CSS は、きれいな境界線や影を設定したり、画像のサイズを指定したりするために使用しますので、ここでは必要ありません。

+ここでは、ユーザーが選択したファイルを処理するループが各ファイルの `type` 属性を見て、その MIME タイプが "`image/`" という文字列で始まるかどうかを確認しています。画像である各ファイルに対して、新しい `img` 要素を作成します。CSS は、きれいな境界線や影を設定したり、画像のサイズを指定したりするために使用しますので、ここでは必要ありません。
 
-
各画像には CSS クラス obj が追加されており、DOM ツリーで簡単に見つけることができます。また、各画像に file 属性を追加し、画像の {{DOMxRef("File")}} を指定しています。これにより、後で実際にアップロードする画像を取得することができます。{{DOMxRef("Node.appendChild()")}} を使用して、ドキュメントのプレビュー領域に新しいサムネイルを追加します。

+各画像には CSS クラス `obj` が追加されており、DOM ツリーで簡単に見つけることができます。また、各画像に `file` 属性を追加し、画像の {{DOMxRef("File")}} を指定しています。これにより、後で実際にアップロードする画像を取得することができます。{{DOMxRef("Node.appendChild()")}} を使用して、文書のプレビュー領域に新しいサムネイルを追加します。
 
-
次に、画像の読み込みと img 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい FileReader オブジェクトを作成した後、その onload 関数を設定し、readAsDataURL() を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは data: URL に変換され、onload コールバックに渡されます。このルーチンの実装では、img 要素の src 属性が読み込まれた画像に設定され、その結果、画像がユーザの画面のサムネイルに表示されます。

+次に、画像の読み込みと `img` 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい `FileReader` オブジェクトを作成した後、その `onload` 関数を設定し、`readAsDataURL()` を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは `data:` URL に変換され、`onload` コールバックに渡されます。このルーチンの実装では、`img` 要素の `src` 属性が読み込まれた画像に設定され、その結果、画像がユーザの画面のサムネイルに表示されます。
 
-
オブジェクト URL を利用する

+## オブジェクト URL を利用する
 
-
DOM {{DOMxRef("URL.createObjectURL()")}} と {{DOMxRef("URL.revokeObjectURL()")}} メソッドを使用すると、ユーザーのコンピューター上のローカルファイルなど、DOM {{DOMxRef("File")}} オブジェクトを使用して参照可能なあらゆるデータを参照するために使用できるシンプルな URL 文字列を作成できます。

+DOM の {{DOMxRef("URL.createObjectURL()")}} と {{DOMxRef("URL.revokeObjectURL()")}} メソッドを使用すると、ユーザーのコンピューター上のローカルファイルなど、DOM {{DOMxRef("File")}} オブジェクトを使用して参照可能なあらゆるデータを参照するために使用できるシンプルな URL 文字列を作成できます。
 
-
HTML から URL で参照したい {{DOMxRef("File")}} オブジェクトがある場合は、次のようにオブジェクト URL を作成します。

+HTML から URL で参照したい {{DOMxRef("File")}} オブジェクトがある場合は、次のようにオブジェクト URL を作成します。
 
-
const objectURL = window.URL.createObjectURL(fileObj);

+```js
+const objectURL = window.URL.createObjectURL(fileObj);
+```
 
-
オブジェクト URL は {{DOMxRef("File")}} オブジェクトを識別する文字列です。 {{DOMxRef("URL.createObjectURL()")}} を呼び出すたびに、すでにそのファイルのオブジェクト URL を作成していても、一意のオブジェクト URL が作成されます。これらはそれぞれ解除する必要があります。これらはドキュメントがアンロードされると自動的に解放されますが、ページが動的にこれらを使用している場合は {{DOMxRef("URL.revokeObjectURL()")}} を呼び出して明示的に解放する必要があります。

+オブジェクト URL は {{DOMxRef("File")}} オブジェクトを識別する文字列です。 {{DOMxRef("URL.createObjectURL()")}} を呼び出すたびに、すでにそのファイルのオブジェクト URL を作成していても、一意のオブジェクト URL が作成されます。これらはそれぞれ解除する必要があります。これらはドキュメントがアンロードされると自動的に解放されますが、ページが動的にこれらを使用している場合は {{DOMxRef("URL.revokeObjectURL()")}} を呼び出して明示的に解放する必要があります。
 
-
URL.revokeObjectURL(objectURL);

+```js
+URL.revokeObjectURL(objectURL);
+```
 
-
例: オブジェクト URL で画像を表示

+## 例: オブジェクト URL で画像を表示
 
-
この例では、オブジェクト URL を使用して画像のサムネイルを表示しています。さらに、ファイル名やサイズなどの他のファイル情報も表示します。

+この例では、オブジェクト URL を使用して画像のサムネイルを表示しています。さらに、ファイル名やサイズなどの他のファイル情報も表示します。
 
-
インターフェースとなる HTML は次のようになります。

+インターフェースとなる HTML は次のようになります。
 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
-<a href="#" id="fileSelect">いくつかのファイルを選択します。</a>
-<div id="fileList">
-  <p>選択されたファイルはありません!</p>
-</div>
-

+```html
+
+いくつかのファイルを選択してください。
+

+  
ファイルが選択されていません。

+

+```
 
-
これにより、ファイル {{HTMLElement("input")}} 要素と、ファイル ピッカーを呼び出すリンクが確立されます (あまり美しくないファイル入力を非表示にするため)。これは、ファイル ピッカーを呼び出すメソッドと同様に、セクション {{anch("click() メソッドを使用して非表示のファイル入力要素を使用する")}} で説明されています。

+これにより、ファイル {{HTMLElement("input")}} 要素と、ファイル選択を呼び出すリンクが確立されます (あまり美しくないファイル入力を非表示にするため)。これは、ファイル選択を呼び出すメソッドと同様に、セクション {{anch("click_%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AE_input_%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B", "click() メソッドを使用して非表示の input 要素を使用する")}} で説明されています。
 
-
handleFiles() メソッドは次のようになります。

+`handleFiles()` メソッドは次のようになります。
 
-
const fileSelect = document.getElementById("fileSelect"),
+```js
+const fileSelect = document.getElementById("fileSelect"),
     fileElem = document.getElementById("fileElem"),
     fileList = document.getElementById("fileList");
 
@@ -282,12 +306,12 @@ fileElem.addEventListener("change", handleFiles, false);
 
 function handleFiles() {
   if (!this.files.length) {
-    fileList.innerHTML = "<p>ファイルが選択されていません!</p>";
+    fileList.innerHTML = "
ファイルが選択されていません。
";
   } else {
     fileList.innerHTML = "";
     const list = document.createElement("ul");
     fileList.appendChild(list);
-    for (let i = 0; i < this.files.length; i++) {
+    for (let i = 0; i < this.files.length; i++) {
       const li = document.createElement("li");
       list.appendChild(li);
 
@@ -299,60 +323,58 @@ function handleFiles() {
       }
       li.appendChild(img);
       const info = document.createElement("span");
-      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " バイト";
       li.appendChild(info);
     }
   }
 }
-

+```
+
+これは、{{HTMLElement("div")}} の URL を `fileList` という ID で取得することから始まります。これは、サムネイルを含むファイルリストを挿入するブロックです。
 
-
これは、{{HTMLElement("div")}} の URL を fileList という ID で取得することから始まります。これは、サムネイルを含むファイルリストを挿入するブロックです。

+`handleFiles()` に渡された {{DOMxRef("FileList")}} オブジェクトが `null` の場合、ブロックの内部 HTML に「ファイルが選択されていません」と表示するように設定します。そうでない場合は、次のようにファイルリストの構築を開始します。
 
-
handleFiles() に渡された {{DOMxRef("FileList")}} オブジェクトが null の場合、ブロックの内部 HTML に「ファイルが選択されていません」と表示するように設定します。そうでない場合は、次のようにファイルリストの構築を開始します。

+1.  新しく順序なしリスト ({{HTMLElement("ul")}}) 要素を作成します。
+2.  新しいリスト要素は、{{HTMLElement("div")}} ブロックの中に {{DOMxRef("Node.appendChild()")}} メソッドを呼び出すことで挿入されます。
+3.  `files` で表される {{DOMxRef("FileList")}} 内のそれぞれの {{DOMxRef("File")}} に対して次の処理を実行します。
 
-
    
- 
  1. 新しく順序なしリスト ({{HTMLElement("ul")}}) 要素を作成します
    2. 
- 
  2. 新しいリスト要素は、{{HTMLElement("div")}} ブロックの {{DOMxRef("Node.appendChild()")}} メソッドを呼び出して {{HTMLElement("div")}} ブロックに挿入されます
    3. 
- 
  3. files で表される {{DOMxRef("FileList")}} 内の各 {{DOMxRef("File")}} に対して次の処理を実行します
-  
      
-   
    1. 新しくリスト項目 ({{HTMLElement("li")}}) 要素を作成し、リストに挿入します
      2. 
-   
    2. 新しく画像 ({{HTMLElement("img")}}) 要素を作成します
      3. 
-   
    3. {{DOMxRef("URL.createObjectURL()")}} を用いて、Blob の URL を作成して、画像のソースをファイルを表す新しいオブジェクト URL に設定します
      4. 
-   
    4. 画像の高さを60ピクセルに設定します
      5. 
-   
    5. 画像が読み込まれると不要になるため、画像の読み込みイベントハンドラを設定してオブジェクトの URL を解放します。これは {{DOMxRef("URL.revokeObjectURL()")}} メソッドを呼び出し、img.src で指定したオブジェクト URL 文字列を渡すことで行います
      6. 
-   
    6. 新しいリスト項目をリストに追加する
      7. 
-  
    
- 
    4. 
-

+    1.  新しくリスト項目 ({{HTMLElement("li")}}) 要素を作成し、リストに挿入します。
+    2.  新しく画像 ({{HTMLElement("img")}}) 要素を作成します。
+    3.  {{DOMxRef("URL.createObjectURL()")}} を用いて、Blob の URL を作成して、画像のソースをファイルを表す新しいオブジェクト URL に設定します。
+    4.  画像の高さを 60 ピクセルに設定します。
+    5.  画像が読み込まれると不要になるため、画像の読み込みイベントハンドラーを設定してオブジェクトの URL を解放します。これは {{DOMxRef("URL.revokeObjectURL()")}} メソッドを呼び出し、`img.src` で指定したオブジェクト URL 文字列を渡すことで行います。
+    6.  新しいリスト項目をリストに追加する。
 
-
上のコードのライブデモはこちらです。

+上のコードのライブデモはこちらです。
 
-
{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}

+{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}
 
-
例: ユーザが選択したファイルを送信

+## 例: ユーザが選択したファイルを送信
 
-
もう１つは、ユーザーが選択したファイルやファイル (先ほどの例で選択した画像など) をサーバーにアップロードできるようにすることです。これは非常に簡単に非同期で行うことができます。

+もう１つは、ユーザーが選択したファイルやファイル (先ほどの例で選択した画像など) をサーバーにアップロードできるようにすることです。これは非常に簡単に非同期で行うことができます。
 
-
アップロードタスクの生成

+### アップロードタスクの生成
 
-
前の例でサムネイルを作成したコードの続きで、すべてのサムネイル画像が CSS クラス obj にあり、対応する {{DOMxRef("File")}}} が file 属性に添付されていることを思い出してください。これにより、このように{{DOMxRef("Document.querySelectorAll()")}}を使用して、ユーザーがアップロードするために選択した画像をすべて選択することができます。

+前の例でサムネイルを作成したコードの続きで、すべてのサムネイル画像が CSS クラス `obj` にあり、対応する {{DOMxRef("File")}}} が `file` 属性に添付されていることを思い出してください。これにより、このように{{DOMxRef("Document.querySelectorAll()")}}を使用して、ユーザーがアップロードするために選択した画像をすべて選択することができます。
 
-
function sendFiles() {
+```js
+function sendFiles() {
   const imgs = document.querySelectorAll(".obj");
 
-  for (let i = 0; i < imgs.length; i++) {
+  for (let i = 0; i < imgs.length; i++) {
     new FileUpload(imgs[i], imgs[i].file);
   }
 }
-

+```
 
-
2 行目は、CSS クラス obj を持つドキュメント内のすべての要素の {{DOMxRef("NodeList")}}} を取得し imgs と呼ばれる変数に格納します。この例では、これらの要素はすべての画像サムネイルになります。このリストを取得したら、それを参照して、それぞれの新しい FileUpload インスタンスを作成するのは簡単です。それぞれが対応するファイルのアップロードを処理します。

+2 行目は、CSS クラス `obj` を持つドキュメント内のすべての要素の {{DOMxRef("NodeList")}}} を取得し `imgs` と呼ばれる変数に格納します。この例では、これらの要素はすべての画像サムネイルになります。このリストを取得したら、それを参照して、それぞれの新しい `FileUpload` インスタンスを作成するのは簡単です。それぞれが対応するファイルのアップロードを処理します。
 
-
ファイルのアップロード処理を行う

+### ファイルのアップロード処理を行う
 
-
FileUpload 関数は2つの入力、画像要素と画像データを読み込むファイルを受け付けます。

+`FileUpload` 関数は 2 つの入力、画像要素と画像データを読み込むファイルを受け付けます。
 
-
function FileUpload(img, file) {
+```js
+function FileUpload(img, file) {
   const reader = new FileReader();
   this.ctrl = createThrobber(img);
   const xhr = new XMLHttpRequest();
@@ -378,37 +400,36 @@ function handleFiles() {
   };
   reader.readAsBinaryString(file);
 }
-

+```
 
-
上の FileUpload() 関数は、進捗情報を表示するための throbber を作成し、データのアップロードを処理するための {{DOMxRef("XMLHttpRequest")}} を作成します。

+上の `FileUpload()` 関数は、進捗情報を表示するための throbber を作成し、データのアップロードを処理するための {{DOMxRef("XMLHttpRequest")}} を作成します。
 
-
実際にデータを転送する前に、いくつかの準備段階があります。

+実際にデータを転送する前に、いくつかの準備段階があります。
 
-
    
- 
  1. XMLHttpRequest のアップロード progress リスナーは、アップロードの進捗に応じて最新の情報に基づいて throbber が更新されるように、新しいパーセンテージ情報で throbber を更新するように設定されています
    2. 
- 
  2. XMLHttpRequest のアップロード load イベントハンドラは、進捗インジケータが実際に 100 % に達することを確認するために、throbber の進捗情報を 100 % に更新するように設定されています (プロセス中に粒度のクセがある場合)。そして、必要がなくなれば throbber を削除します。これにより、アップロードが完了すると throbber が消えます
    3. 
- 
  3. 画像ファイルをアップロードするリクエストは、XMLHttpRequest の open() メソッドを呼び出して POST リクエストを生成することで開始されます
    4. 
- 
  4. アップロードの MIME タイプは XMLHttpRequest 関数の overrideMimeType() を呼び出して設定します。この場合、一般的な MIME タイプを使用しています。ユースケースによっては MIME タイプを設定する必要がない場合もあります
    5. 
- 
  5. FileReader オブジェクトを使用して、ファイルをバイナリ文字列に変換します
    6. 
- 
  6. 最後に、コンテンツがロードされると、XMLHttpRequest 関数の send() が呼び出され、ファイルのコンテンツがアップロードされます
    7. 
-

+1.  `XMLHttpRequest` のアップロード `progress` リスナーは、アップロードの進捗に応じて最新の情報に基づいて throbber が更新されるように、新しいパーセント値の情報で throbber を更新するように設定されています。
+2.  `XMLHttpRequest` のアップロード `load` イベントハンドラーは、進捗インジケーターが実際に 100 % に達することを確認するために、throbber の進捗情報を 100% に更新するように設定されています (プロセス中に粒度のクセがある場合)。そして、必要がなくなれば throbber を削除します。これにより、アップロードが完了すると throbber が消えます。
+3.  画像ファイルをアップロードするリクエストは、`XMLHttpRequest` の `open()` メソッドを呼び出して POST リクエストを生成することで開始されます。
+4.  アップロードの MIME タイプは `XMLHttpRequest` 関数の `overrideMimeType()` を呼び出して設定します。この場合、一般的な MIME タイプを使用しています。用途によっては MIME タイプを設定する必要がない場合もあります。
+5.  `FileReader` オブジェクトを使用して、ファイルをバイナリー文字列に変換します
+6.  最後に、コンテンツがロードされると、 `XMLHttpRequest` 関数の `send()` が呼び出され、ファイルのコンテンツがアップロードされます。
 
-
ファイルのアップロード処理を非同期に扱う

+### ファイルのアップロード処理を非同期に扱う
 
-
この例では、サーバー側で PHP を使用し、クライアント側で JavaScript を使用して、ファイルの非同期アップロードを実演しています。

+この例では、サーバー側で PHP を使用し、クライアント側で JavaScript を使用して、ファイルの非同期アップロードを実演しています。
 
-
<?php
+```js
+
+
+
+    dnd binary upload
+    
+    
+
+
+    

+        
Drag & drop your file here...

+    

+
+
+```
 
-
例: オブジェクト URL を使用して PDF を表示

+## 例: オブジェクト URL を使用して PDF を表示
 
-
オブジェクト URL は画像以外にも使用できます。埋め込まれた PDF ファイルや、ブラウザーで表示可能な他のリソースを表示するために使用できます。

+オブジェクト URL は画像以外にも使用できます。埋め込まれた PDF ファイルや、ブラウザーで表示可能な他のリソースを表示するために使用できます。
 
-
Firefox では、 PDF が iframe 内に埋め込まれて表示されるようにするには (ダウンロードファイルとして提案されるのではなく)、pdfjs.disabled の設定を false {{non-standard_inline()}} に設定する必要があります。

+Firefox では、 PDF が iframe 内に埋め込まれて表示されるようにするには (ダウンロードファイルとして提案されるのではなく)、`pdfjs.disabled` の設定を `false` {{non-standard_inline()}} に設定する必要があります。
 
-
<iframe id="viewer">
-

+```html
+