path: root/files/ja/web/html/element/input/file/index.html

---
title: <input type="file">
slug: Web/HTML/Element/input/file
tags:
  - Directory Picker
  - File
  - File Picker
  - Files
  - Form input
  - HTML
  - HTML forms
  - Input Type
  - Reference
  - Type
translation_of: Web/HTML/Element/input/file
---
<div>{{HTMLRef("Input_types")}}</div>

<p><span class="seoSummary"><strong><code>type="file"</code></strong> 型の {{HTMLElement("input")}} 要素は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルは<a href="/ja/docs/Learn/HTML/Forms">フォーム投稿</a>を使用してサーバーにアップロードしたり、 JavaScript コードと <a href="/ja/docs/Web/API/File/Using_files_from_web_applications">File API</a> を使用して操作したりすることができます。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value", "値")}}</strong></td>
   <td>選択されたファイルのパスを表す {{domxref("DOMString")}} です。</td>
  </tr>
  <tr>
   <td><strong>イベント</strong></td>
   <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td>
  </tr>
  <tr>
   <td><strong>対応する共通属性</strong></td>
   <td>{{htmlattrxref("required", "input")}}</td>
  </tr>
  <tr>
   <td><strong>追加の属性</strong></td>
   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
  </tr>
  <tr>
   <td><strong>IDL 属性</strong></td>
   <td><code>files</code> および <code>value</code></td>
  </tr>
  <tr>
   <td><strong>DOM インターフェイス</strong></td>
   <td>
    <p>{{domxref("HTMLInputElement")}}</p>
   </td>
  </tr>
  <tr>
   <td><strong>プロパティ</strong></td>
   <td>
    <p><a href="/ja/docs/Web/API/HTMLInputElement#Properties_file"><code>file</code> 型の要素にだけ適用されるプロパティ</a></p>
   </td>
  </tr>
  <tr>
   <td><strong>メソッド</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Value" name="Value">値</h2>

<p>ファイル入力欄の {{htmlattrxref("value", "input")}} 属性には、選択されたファイルへのパスを表す {{domxref("DOMString")}} が入ります。ユーザーが複数のファイルを選択すると、 <code>value</code> は選択されたファイルのリストのうち最初のファイルを表します。その他のファイルは input 要素の <code>HTMLInputElement.files</code> プロパティを使って得ることができます。</p>

<div class="note"><strong>注:</strong>

<ol>
 <li>複数のファイルが選択された場合、文字列は最初に選択されたファイルを表します。 JavaScript は他のファイルに <a href="/ja/docs/Using_files_from_web_applications#Getting_information_about_selected_files">input の <code>FileList</code> プロパティを通して</a>アクセスすることができます。</li>
 <li>ファイルが選択されていない場合、文字列は <code>""</code> (空) になります。</li>
 <li>疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するため、文字列には <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly"><code>C:\fakepath\</code> の接頭辞が付きます</a>。</li>
</ol>
</div>

<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>

<p>すべての {{HTMLElement("input")}} に共通の属性に加え、 <code>file</code> 型の入力欄は次の属性にも対応しています。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("accept")}}</code></td>
   <td>許可するファイル型を表す1つ以上の{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</td>
  </tr>
  <tr>
   <td><code>{{anch("capture")}}</code></td>
   <td>画像や動画データをキャプチャするのに使用するソースは何か</td>
  </tr>
  <tr>
   <td><code>{{anch("files")}}</code></td>
   <td>選択されたファイルを列挙する {{domxref("FileList")}}</td>
  </tr>
  <tr>
   <td><code>{{anch("multiple")}}</code></td>
   <td>論理値で、存在すれば、ユーザーが複数のファイルを選択することができることを表す</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>

<p><a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性の値は文字列で、ファイル入力欄が受け付けるファイル型を定義します。この文字列は<strong>{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</strong>をカンマで区切ったリストです。指定されたファイル型が複数の方法で識別されることがあるので、指定された形式のファイルが必要な場合は一連の型指定子を提供するといいでしょう。</p>

<p>例えば、 Microsoft Word ファイルを識別する方法がいくつもあるので、 Word ファイルを受け付けるサイトは次のように <code>&lt;input&gt;</code> を使用することがあります。</p>

<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>

<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>

<p><a href="/ja/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 属性は文字列で、 <a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性で入力が画像または映像データであると示した場合、これらのデータを取り込むためにどのカメラを使用するかを指定します。 <code>user</code> の値では、ユーザーの方を向いているカメラやマイクを使用します。 <code>environment</code> は外側を向いたカメラやマイクを使用します。この属性がない場合、{{Glossary("user agent", "ユーザーエージェント")}}は何をするかを自分で自由に決めます。要求された方向が有効ではない場合、ユーザーエージェントは推奨される既定のモードで代用します。</p>

<div class="note"><strong>注:</strong> <code>capture</code> は以前は論理値であり、存在した場合、ファイル入力を要求する代わりに、カメラやマイクなどその端末のメディア取り込み機器を使用するように要求していました。</div>

<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>

<p>{{domxref("FileList")}} オブジェクトで、選択されたそれぞれのファイルのリストです。このリストは {{htmlattrxref("multiple", "input/file")}} 属性が指定されていない限り、メンバーが複数にはなりません。</p>

<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>

<p><a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 論理属性が指定されていると、ファイル入力欄はユーザーに複数のファイルを選択することを許します。</p>

<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>

<p>上記に挙げた属性に加え、以下の標準外の属性が一部のブラウザーで利用できます。実装していないブラウザーではコードが機能する可能性が制限されるため、できれば使用することを避けてください。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("webkitdirectory")}}</code></td>
   <td>論理値で、ユーザーが単一のディレクトリ (または <code>{{anch("multiple")}}</code> 属性がある場合は複数のディレクトリ) のみを選択できるようにするかどうかを選択します。</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>

<div id="webkitdirectory-include">
<p>論理値の <code>webkitdirectory</code> 属性は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリのみを選択することができることを示します。詳しい解説と例については {{domxref("HTMLInputElement.webkitdirectory")}} を参照してください。</p>

<div class="note">
<p><strong>注:</strong> <code>webkitdirectory</code> はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、 Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。</p>
</div>
</div>

<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル型指定子</h2>

<p><strong>固有ファイル型指定子</strong>は文字列で、 <code>file</code> 型の {{HTMLElement("input")}} 要素でユーザーが選択することができるファイルの種類を記述します。それぞれの固有ファイル型指定子は、次の形のうち一つを取ることができます。</p>

<ul>
 <li>有効なファイル拡張子で、大文字小文字の区別なく、ピリオド (".") 文字で始まるもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> など。</li>
 <li>有効な MIME タイプ文字列で、拡張子のないもの。</li>
 <li>文字列 <code>audio/*</code> で「任意の音声ファイル」を意味する。</li>
 <li>文字列 <code>video/*</code> で「任意の動画ファイル」を意味する。</li>
 <li>文字列 <code>image/*</code> で「任意の画像ファイル」を意味する。</li>
</ul>

<p><code>accept</code> 属性は、これらの固有ファイル型指定子を1つ以上含む文字列を取ります。例えば、ファイル選択ダイアログが画像として表示することができるコンテンツを必要としており、標準の画像形式と PDF ファイルの両方を含める場合、このようになります。</p>

<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>

<h2 id="Using_file_inputs" name="Using_file_inputs">ファイル入力欄の使用</h2>

<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
 &lt;div&gt;
   &lt;label for="file"&gt;アップロードするファイルを選択してください&lt;/label&gt;
   &lt;input type="file" id="file" name="file" multiple&gt;
 &lt;/div&gt;
 &lt;div&gt;
   &lt;button&gt;送信&lt;/button&gt;
 &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
}</pre>
</div>

<p>これは以下のような出力になります。</p>

<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p>

<div class="note">
<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p>
</div>

<p>ユーザーの端末やオペレーティングシステムに関わらず、ファイル入力欄にはユーザーがファイルを選択することができるファイル選択ダイアログを開くボタンがあります。</p>

<p>上記のように、 {{htmlattrxref("multiple", "input/file")}} 属性を含めると、複数のファイルを一度に選択することができることを指定します。ユーザーはファイル選択ダイアログから、プラットフォームが許す方法 (例えば、 <kbd>Shift</kbd> または <kbd>Control</kbd> を押しながらクリック) によって、複数のファイルを選択できます。ユーザーに <code>&lt;input&gt;</code> あたり1つのファイルを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p>

<h3 id="Getting_information_on_selected_files" name="Getting_information_on_selected_files">選択されたファイルの情報の取得</h3>

<p>選択されたファイルは、要素の {{domxref("HTMLElement.files", "files")}} プロパティで返され、これは {{domxref("File")}} オブジェクトのリストを含む {{domxref("FileList")}} オブジェクトです。 <code>FileList</code> は配列のようにふるまうので、 <code>length</code> プロパティを使用して選択されたファイルの数を取得することができます。</p>

<p>それぞれの <code>File</code> オブジェクトは以下のような情報を持っています。</p>

<dl>
 <dt><code>name</code></dt>
 <dd>ファイルの名前です。</dd>
 <dt><code>lastModified</code></dt>
 <dd>ファイルが最後に変更された日時を表す数値で、 UNIX 時刻 (1970年1月1日午前0時) からの経過ミリ秒数です。</dd>
 <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
 <dd>ファイルが最後に変更された日時を表す {{jsxref("Date")}} オブジェクトです。<em>これは非推奨であり使うべきではありません。代わりに <code>lastModified</code> を使用してください。</em></dd>
 <dt><code>size</code></dt>
 <dd>バイト数によるファイルの長さです。</dd>
 <dt><code>type</code></dt>
 <dd>ファイルの <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>です。</dd>
 <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
 <dd>ディレクトリ選択ダイアログ (つまり、 {{htmlattrxref("webkitdirectory", "input/file")}} 属性が設定されている <code>file</code> ダイアログ) で選択されたベースディレクトリからのファイルの相対パスを表す文字列です。<em>これは標準外なので使用するには注意してください。</em></dd>
</dl>

<div class="note">
<p><strong>注</strong>: 最近のブラウザーはすべて、 <code>HTMLInputElement.files</code> の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン57で追加されました (see {{bug(1384030)}})。</p>
</div>

<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル型の制限</h3>

<p>ふつう、ユーザーが自由な形式のファイルを選択できるようにはしたくないでしょう。代わりに、特定の形式のファイルを選択させたいでしょう。例えば、ファイル入力欄でユーザーにプロフィールファイルをアップロードさせるのであれば、おそらく {{Glossary("JPEG")}} または {{Glossary("PNG")}} のようなウェブに互換性がある画像形式を選択させたいでしょう。</p>

<p>受付可能なファイル形式は {{htmlattrxref("accept","input/file")}} 属性で、受け付けるファイルの拡張子または MIME タイプいくつか例を示します。</p>

<ul>
 <li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付けます。</li>
 <li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付けます。</li>
 <li><code>accept="image/*"</code> — <code>image/*</code> の MIME タイプである任意のファイルを受け付けます。 (多くのモバイル端末では、この場合にユーザーがカメラで写真を撮ることもできるようになっています。)</li>
 <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思われるファイルをすべて受け付けます。</li>
</ul>

<p>もっと複雑な例を見てみましょう。</p>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
    &lt;label for="profile_pic"&gt;アップロードするファイルを選択してください&lt;/label&gt;
    &lt;input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;送信&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">div {
  margin-bottom: 10px;
}</pre>
</div>

<p>これは前回の例と似た外見の出力をします。</p>

<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p>

<div class="note">
<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">ライブ実行</a>を確認してください。</p>
</div>

<p>同じように見えるかもしれませんが、この入力欄でファイルを選択しようとすると、このファイル選択ダイアログでは <code>accept</code> の値で指定されたファイル形式しか選択できません。 (細かい動きはブラウザーやオペレーティングシステムによって異なります)。</p>

<p><img alt="macOS のファイル選択ダイアログのスクリーンショットです。 JPEG 以外のファイルは灰色になり選択できません。" src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>

<p><code>accept</code> 属性は選択されたファイルの形式を検証しません。単にブラウザーにユーザーが正しいファイル形式を選択するためのガイドするためのヒントを出すだけです。 (多くの場合) ユーザーがファイル選択ダイアログオプションを切り替えることで、ファイル選択ダイアログがこの設定を上書きして任意のファイルを選択することができるので、不正なファイル形式を選択する可能性があります。</p>

<p>このため、 <code>accept</code> 属性は適切なサーバー側の検証でバックアップする必要があることを意識しておいてください。</p>

<h3 id="Notes" name="Notes">注</h3>

<ol>
 <li>
  <p>スクリプトからファイル選択ダイアログの値を設定することはできません。 — 以下のようにしても効果はありません。</p>

  <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]");
input.value = "foo";
</pre>
 </li>
 <li>
  <p><code>&lt;input type="file"&gt;</code> を使用してファイルが選択された場合、セキュリティ上の理由から、元のファイルへの実際のパスが <code>value</code> 属性上では見えないようになっています。その代わりに、ファイル名の先頭に <code>C:\fakepath\</code> を追加したものが表示されます。この処置にはいくつかの経緯上の理由がありますが、すべての最新のブラウザーで対応されており、実際に<a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">仕様書で定義されています</a>。</p>
 </li>
</ol>

<h2 id="Examples" name="Examples">例</h2>

<p>この例では、この例では、 {{domxref("HTMLInputElement.files")}} プロパティで利用できるファイル情報を利用する、さらに高度なファイル選択ダイアログを示し、またいくつか巧妙なテクニックを示します。</p>

<div class="note">
<p><strong>注</strong>: この例の完全なソースコードは GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">ライブ版もあります</a>) で見ることができます。 CSS については説明しません。 JavaScript が中心です。</p>
</div>

<p>最初に、 HTML を見てみましょう。</p>

<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;div&gt;
    &lt;label for="image_uploads"&gt;アップロードする画像を選択してください (PNG, JPG)&lt;/label&gt;
    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
  &lt;/div&gt;
  &lt;div class="preview"&gt;
    &lt;p&gt;アップロードするファイルが選択されていません&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;送信&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li, div &gt; p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label, form button {
  background-color: #7F9CCB;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover, form button:hover {
  background-color: #2D5BA3;
  color: white;
}

form label:active, form button:active {
  background-color: #0D3F8F;
  color: white;
}</pre>
</div>

<p>これは以前見たものに似ています。特筆するべきものはありません。</p>

<p>次に、 JavaScript を一通り見てみましょう。</p>

<p>スクリプトの最初の行で、フォームの入力欄自体と <code>.preview</code> クラスが設定された {{htmlelement("div")}} 要素の参照を取得します。次に {{htmlelement("input")}} 要素を非表示にします。 — これは、ファイル入力欄が概して醜く、スタイル付けをするのが難しく、ブラウザー間でデザインに一貫性がないからです。 {{htmlelement("label")}} をクリックすることで <code>input</code> 要素をアクティブ化することができるので、 <code>input</code> 要素を見かけは非表示にしてラベルをボタンらしくしたほうが、ユーザーがファイルをアップロードしたいときの操作が分かります。</p>

<pre class="brush: js notranslate">const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;</pre>

<div class="note">
<p><strong>注:</strong> ファイル入力欄を非表示にするのに {{cssxref("visibility", "visibility: hidden")}} や {{cssxref("display", "display: none")}} ではなく {{cssxref("opacity")}} を使用しているのは、支援技術が前二者のファイル入力欄が対話可能ではないと解釈するからです。</p>
</div>

<p>次に、<a href="/ja/docs/Web/API/EventTarget/addEventListener">イベントリスナー</a>を入力欄に追加して、選択された値の変化 (この場合、ファイルが選択されたこと) を監視します。イベントリスナーは独自の <code>updateImageDisplay()</code> 関数を呼び出します。</p>

<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre>

<p><code>updateImageDisplay()</code> 関数が呼び出されるたびに、以下のことを行います。</p>

<ul>
 <li>{{jsxref("Statements/while", "while")}} ループを使ってプレビューの <code>&lt;div&gt;</code> の中にある以前のコンテンツを空にします。</li>
 <li>選択されたすべてのファイルの情報を持つ {{domxref("FileList")}} オブジェクトを取り、 <code>curFiles</code> と呼ばれる変数に保存します。</li>
 <li><code>curFiles.length</code> が0かどうかをチェックすることで、ファイルが選択されていないかを確認します。選択されていない場合は、プレビューの <code>&lt;div&gt;</code> に選択されているファイルがない旨のメッセージを表示します。</li>
 <li>ファイルが選択されて<em>いた</em>場合、ループで1つずつ、プレビューの <code>&lt;div&gt;</code> にそれについての情報を表示します。特筆するべきは次です。</li>
 <li>独自の <code>validFileType()</code> 関数を使用して、ファイルが正しい形式 (つまり、 <code>accept</code> 属性で指定された画像形式) であるかどうかをチェックします。</li>
 <li>そうであるなら、次のことを行います。
  <ul>
   <li>ファイルの名前とファイルの長さを、前述の <code>&lt;div&gt;</code> (<code>file.name</code> および <code>file.size</code> で取得) 内のリストアイテムに出力します。独自の <code>returnFileSize()</code> 関数はファイルの長さを バイト/KB/MB のうち適切な形式で返します (既定でブラウザーは長さを絶対的なバイトで返します)。</li>
   <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}} を呼び出して、画像のプレビューのサムネイルを生成します。次に、新しい {{htmlelement("img")}} を生成し、その {{htmlattrxref("src", "img")}} をサムネイルに設定することで、リスト項目にも画像を挿入します。</li>
  </ul>
 </li>
 <li>ファイル形式が無効である場合、リストのアイテム内にメッセージを表示して、ユーザーに別なファイル形式を選択する必要があることを伝えます。</li>
</ul>

<pre class="brush: js notranslate">function updateImageDisplay() {
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if(curFiles.length === 0) {
    const para = document.createElement('p');
    para.textContent = 'アップロードするファイルが選択されていません';
    preview.appendChild(para);
  } else {
    const list = document.createElement('ol');
    preview.appendChild(list);

    for(const file of curFiles) {
      const listItem = document.createElement('li');
      const para = document.createElement('p');
      if(validFileType(file)) {
        para.textContent = `ファイル名: ${file.name}, ファイルの長さ: ${returnFileSize(file.size)}.`;
        const image = document.createElement('img');
        image.src = URL.createObjectURL(file);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `ファイル名: ${file.name}: ファイル形式が有効ではありません。選択しなおしてください。`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}</pre>

<p>独自の <code>validFileType()</code> 関数は {{domxref("File")}} オブジェクトを引数として取り、それから {{jsxref("Array.prototype.includes()")}} を使用して、 <code>fileTypes</code> の中の値にファイルの <code>type</code> プロパティに一致するものがあるかどうかをチェックします。一致するものが見つかった場合は、関数は <code>true</code> を返します。一致するものが見つからなければ、 <code>false</code> を返します。</p>

<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon"
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}</pre>

<p><code>returnFileSize()</code> 関数は数値 (現在のファイルの <code>size</code> プロパティから取得したバイト数) を取り、バイト/KB/MB のうち適切な形式で返します。</p>

<pre class="brush: js notranslate">function returnFileSize(number) {
  if(number &lt; 1024) {
    return number + 'bytes';
  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number &gt;= 1048576) {
    return (number/1048576).toFixed(1) + 'MB';
  }
}</pre>

<p>この例は次のようにできます。使ってみましょう。</p>

<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>初回定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>初回定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
   <td>{{Spec2('HTML Media Capture')}}</td>
   <td>initial <code>capture</code> attribute</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.input.input-file")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの利用</a> — <code>&lt;input type="file"&gt;</code> および <a href="/ja/docs/Web/API/File">File API</a> に関するたくさんの有用な例も含まれています。</li>
 <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li>
</ul>