initial commit

14 files changed, 1442 insertions, 0 deletions

diff --git a/files/ja/web/api/file/file/index.html b/files/ja/web/api/file/file/index.html
new file mode 100644
index 0000000000..ed312c9a9c
--- /dev/null
+++ b/files/ja/web/api/file/file/index.html
@@ -0,0 +1,72 @@
+---
+title: File.File()
+slug: Web/API/File/File
+tags:
+  - API
+  - File
+  - File API
+  - Reference
+  - コンストラクター
+translation_of: Web/API/File/File
+---
+<div>{{APIRef("File")}}</div>
+
+<p><code><strong>File()</strong></code> コンストラクターは新しい {{domxref("File")}} オブジェクトのインスタンスを生成します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">File(bits, name [, options]);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>bits</code></dt>
+ <dd>{{jsxref("Array")}}、{{domxref("ArrayBuffer")}}、{{domxref("ArrayBufferView")}}、{{domxref("Blob")}}、{{domxref("USVString")}} の {{jsxref("Array")}} オブジェクト、またはそれらをあわせたものを {{domxref("File")}} 内に格納します。<code>USVString</code> オブジェクトは UTF-8 でエンコードされます。</dd>
+ <dt><code>name</code></dt>
+ <dd>ファイル名またはファイルへのパスを表す {{domxref("USVString")}}。</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>ファイルのオプション属性を含むオプションオブジェクト。利用可能なオプションは以下の通りです。
+ <ul>
+  <li><code>type</code>: ファイルの中に入るコンテンツの MIME タイプを表す {{domxref("DOMString")}} です。既定値は <code>""</code> です</li>
+  <li><code>lastModified</code>: UNIX 時刻方式のミリ秒単位で、ファイルが最後に更新された時刻を表す数値です。既定値は {{jsxref("Date.now()")}} です。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">var file = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});</pre>
+
+<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('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</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("api.File.File")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/filename/index.html b/files/ja/web/api/file/filename/index.html
new file mode 100644
index 0000000000..8096f58d4e
--- /dev/null
+++ b/files/ja/web/api/file/filename/index.html
@@ -0,0 +1,37 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - API
+  - DOM
+  - File API
+  - Files
+  - Non-standard
+  - Obsolete
+  - Property
+  - Reference
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}{{obsolete_header(7.0)}}</p>
+
+<p>ファイルの名前を返します。セキュリティ上の理由から、このプロパティからパスは除外されます。</p>
+
+<div class="note">このプロパティは非推奨です。代わりに {{domxref("File.name")}} を使用してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate">var name = instanceOfFile.fileName</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>文字列</p>
+
+<h2 id="Specification" name="Specification">仕様策定状況</h2>
+
+<p>どの仕様書でも策定されていません。</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/filesize/index.html b/files/ja/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..21ee3a0562
--- /dev/null
+++ b/files/ja/web/api/file/filesize/index.html
@@ -0,0 +1,38 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+tags:
+  - DOM
+  - File API
+  - Files
+  - Non-standard
+  - Obsolete
+  - Property
+  - Reference
+  - ファイル
+  - プロパティ
+translation_of: Web/API/File/fileSize
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}{{obsolete_header(7.0)}}</p>
+
+<p>ファイルオブジェクトの容量をバイト単位で返します。</p>
+
+<div class="note">このプロパティは非推奨です。代わりに {{domxref("File.size")}} を使用してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate">var size = <em>instanceOfFile</em>.fileSize</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>数値</p>
+
+<h2 id="Specification" name="Specification">仕様策定状況</h2>
+
+<p>どの仕様書でも策定されていません。</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/getasbinary/index.html b/files/ja/web/api/file/getasbinary/index.html
new file mode 100644
index 0000000000..e6b74acb06
--- /dev/null
+++ b/files/ja/web/api/file/getasbinary/index.html
@@ -0,0 +1,77 @@
+---
+title: File.getAsBinary()
+slug: Web/API/File/getAsBinary
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - メソッド
+  - 廃止
+  - 非標準
+translation_of: Web/API/File/getAsBinary
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>getAsBinary</code> メソッドを使用すると、生のバイナリ形式でファイルのデータにアクセスできます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメソッドは廃止されました。代わりに{{domxref("FileReader")}} メソッドである {{domxref("FileReader.readAsArrayBuffer()","readAsArrayBuffer()")}}、もしくは {{domxref("FileReader.readAsBinaryString()","readAsBinaryString()")}}  を実行してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre>var binary = <var>instanceOfFile</var>.getAsBinary();</pre>
+
+<h3 id="Returns" name="Returns">返値</h3>
+
+<p>文字列です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js;">// fileInput is an HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files は NodeList と似た FileList オブジェクトへの参照
+var files = fileInput.files;
+
+// 許容するメディアタイプを記したオブジェクト
+var accept = {
+  binary : ["image/png", "image/jpeg"],
+  text   : ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i &lt; files.length; i++) {
+  file = files[i];
+
+  // ファイルタイプが見つからない場合の処理
+  if (file !== null) {
+    if (accept.binary.indexOf(file.type) &gt; -1) {
+      // バイナリファイルの場合の処理
+      var data = file.getAsBinary();
+    } else if (accept.text.indexOf(file.type) &gt; -1) {
+      // テキストファイルの場合の処理
+      var data = file.getAsText();
+      // String のメソッドでデータを加工する処理など…
+    }
+  }
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>どの仕様書にも含まれていません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/getasdataurl/index.html b/files/ja/web/api/file/getasdataurl/index.html
new file mode 100644
index 0000000000..4d73665494
--- /dev/null
+++ b/files/ja/web/api/file/getasdataurl/index.html
@@ -0,0 +1,68 @@
+---
+title: File.getAsDataURL()
+slug: Web/API/File/getAsDataURL
+tags:
+  - API
+  - File API
+  - Obsolete
+  - Reference
+  - ファイル
+  - メソッド
+  - 廃止
+  - 非標準
+translation_of: Web/API/File/getAsDataURL
+---
+<div>{{APIRef("File API") }}</div>
+
+<p>{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>getAsDataURL は、参照されるファイルの内容全体をエンコードした <a href="/ja/docs/data_URIs"><code>data:</code></a> URL を提供します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメソッドは廃止されました。代わりに {{domxref("FileReader")}} の {{domxref("FileReader.readAsDataURL","readAsDataURL()")}} メソッドを使用する必要があります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre>var url = <var>instanceOfFile</var>.getAsDataURL();</pre>
+
+<h3 id="Returns" name="Returns">返値</h3>
+
+<p><a href="/ja/docs/data_URIs"><code>data:</code></a> URL を表す文字列</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// fileInput is a HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// array with acceptable file types
+var accept = ["image/png"];
+
+// img is a HTMLImgElement: &lt;img id="myimg"&gt;
+var img = document.getElementById("myimg");
+
+// if we accept the first selected file type
+if (accept.indexOf(files[0].mediaType) &gt; -1) {
+  // display the image
+  // same as &lt;img src="data:image/png,&lt;imagedata&gt;"&gt;
+  img.src = files[0].getAsDataURL();
+}
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>どの仕様書にも含まれていません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/getastext/index.html b/files/ja/web/api/file/getastext/index.html
new file mode 100644
index 0000000000..b0711a798d
--- /dev/null
+++ b/files/ja/web/api/file/getastext/index.html
@@ -0,0 +1,84 @@
+---
+title: File.getAsText()
+slug: Web/API/File/getAsText
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - メソッド
+  - リファレンス
+  - 廃止
+  - 非標準
+translation_of: Web/API/File/getAsText
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>getAsText</code> メソッドは、テキストとして解釈されるファイルのデータを指定されたエンコーディングを使用して提供します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメソッドは廃止されています。代わりに {{domxref("FileReader")}} の {{domxref("FileReader.readAsText()","readAsText()")}} メソッドを使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre>var <var>str</var> = <var>instanceOfFile</var>.getAsText(<var>encoding</var>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><var>encoding</var></dt>
+ <dd>返されるデータに使用するエンコーディングを示す文字列。この文字列が空の場合は、 UTF-8 が使用されます。</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">返値</h3>
+
+<p>指定された <code>encoding</code> のテキストとして解釈されるファイルのデータを含む文字列。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// fileInput is a HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// object for allowed media types
+var accept = {
+  binary : ["image/png", "image/jpeg"],
+  text   : ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i &lt; files.length; i++) {
+  file = files[i];
+
+  // if file type could be detected
+  if (file !== null) {
+    if (accept.text.indexOf(file.mediaType) &gt; -1) {
+      // file is of type text, which we accept
+      // make sure it's encoded as utf-8
+      var data = file.getAsText("utf-8");
+      // modify data with string methods
+
+    } else if (accept.binary.indexOf(file.mediaType) &gt; -1) {
+      // binary
+    }
+  }
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>どの仕様書にも含まれていません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/index.html b/files/ja/web/api/file/index.html
new file mode 100644
index 0000000000..578692cbe2
--- /dev/null
+++ b/files/ja/web/api/file/index.html
@@ -0,0 +1,99 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interface
+  - Reference
+  - Web
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>File</code></strong> インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。</p>
+
+<p><code>File</code> オブジェクトは通常、 {{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{DOMxRef("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{DOMxRef("DataTransfer")}} オブジェクト、または {{DOMxRef("HTMLCanvasElement")}} 上の <code>mozGetAsFile()</code> API から取得します。</p>
+
+<p><code>File</code> オブジェクトは特別な種類の {{domxref("Blob")}} オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL()")}}、{{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}、{{DOMxRef("XMLHttpRequest", "", "send()")}} は、<code>Blob</code> と <code>File</code> の両方を受け付けます。</p>
+
+<p>詳しい情報や例は、<a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの使用</a> を参照してください。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.File", "File()")}}</dt>
+ <dd>新しく構築された <code>File</code> オブジェクトを返します。</dd>
+</dl>
+
+<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.prototype.lastModified")}} {{ReadOnlyInline}}</dt>
+ <dd>ファイルの最終更新時刻を、 UNIX 元期 (1970年1月1日深夜) からの経過ミリ秒数で返します。</dd>
+ <dt>{{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt>
+ <dd><code>File</code> オブジェクトが参照しているファイルの最終更新時刻の {{JSxRef("Date")}} を返します。</dd>
+ <dt>{{DOMxRef("File.prototype.name")}}{{ReadOnlyInline}}</dt>
+ <dd><code>File</code> オブジェクトが参照しているファイルの名前を返します。</dd>
+ <dt>{{DOMxRef("File.prototype.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("File")}} の URL の相対パスを返します。</dd>
+</dl>
+
+<p><code>File</code> は {{DOMxRef("Blob")}} を実装しているので、以下のようなプロパティも利用できます。</p>
+
+<dl>
+ <dt>{{DOMxRef("File.prototype.size")}} {{ReadOnlyInline}}</dt>
+ <dd>ファイルのサイズをバイト単位で返します。</dd>
+ <dt>{{DOMxRef("File.prototype.type")}} {{ReadOnlyInline}}</dt>
+ <dd>ファイルの <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a> タイプを返します。</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2>
+
+<p><em><code>File</code> インターフェイスはメソッドを定義せず、{{DOMxRef("Blob")}} インターフェイスからメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Blob.prototype.slice()", "Blob.prototype.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>ソース <code>Blob</code> の指定したバイト数の範囲のデータを含む新しい <code>Blob</code> オブジェクトを返します。</dd>
+ <dt>{{DOMxRef("Blob.prototype.stream()")}}</dt>
+ <dd><code>File</code> を {{DOMxRef("ReadableStream")}} に変換し、<code>File</code> の内容を読み込めるようにします。</dd>
+ <dt>{{DOMxRef("Blob.prototype.text()")}}</dt>
+ <dd><code>File</code> をストリームに変換し、最後まで読み込みます。これは、{{DOMxRef("USVString")}} (テキスト) で解決するプロミスを返します。</dd>
+ <dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt>
+ <dd><code>File</code> をストリームに変換し、最後まで読み込みます。 {{DOMxRef("ArrayBuffer")}} で解決するプロミスを返します。</dd>
+</dl>
+
+<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('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.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></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">DOM File API を chrome code で使う</a> (Firefox アドオンのような Gecko で実行される特権コード向け)</li>
+</ul>
diff --git a/files/ja/web/api/file/lastmodified/index.html b/files/ja/web/api/file/lastmodified/index.html
new file mode 100644
index 0000000000..5ffcc10a2a
--- /dev/null
+++ b/files/ja/web/api/file/lastmodified/index.html
@@ -0,0 +1,112 @@
+---
+title: File.lastModified
+slug: Web/API/File/lastModified
+tags:
+  - API
+  - File API
+  - ファイル
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/File/lastModified
+---
+<div>{{APIRef("File")}}</div>
+
+<p><code><strong>File.lastModified</strong></code> 読み取り専用プロパティは、ファイルの最終更新日時を UNIX エポック (1970 年 1 月 1 日の深夜 0 時) からのミリ秒数で返します。最終更新日時がわからないファイルは、現在の日時を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:js">var time = <var>instanceOfFile</var>.lastModified;
+</pre>
+
+<h3 id="値">値</h3>
+
+<p>UNIX エポックからのミリ秒数を表す数値。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Reading_from_file_input" name="Reading_from_file_input">file 入力欄からの読み込み</h3>
+
+<pre class="brush: html">&lt;input type="file" multiple id="fileInput"&gt;
+</pre>
+
+<pre>const fileInput = document.querySelector('#fileInput');
+fileInput.addEventListener('change', (event) =&gt; {
+  // filesはFileList型オブジェクト (NodeListと似ている)
+  const files = event.target.files;
+
+  for (let file of files) {
+    const date = new Date(file.lastModified);
+    console.log(`${file.name} has a last modified date of ${date}`);
+  }
+});</pre>
+
+<p>以下の結果を試してみてください。</p>
+
+<p>{{ EmbedLiveSample('Reading_from_file_input', 300, 50) }}</p>
+
+<h3 id="Dynamically_created_files" name="Dynamically_created_files">動的に生成されるファイル</h3>
+
+<p>ファイルが動的に生成された場合、最終更新日時は {{domxref("File.File()", "new File()")}} コンストラクター関数で指定できます。ファイルが見つからない場合、 <code>lastModified</code> は <code>File</code> オブジェクトの作成時に {{jsxref("Date.now()")}} から現在の時刻を継承します。</p>
+
+<pre class="brush:js">var fileWithDate = new File([], 'file.bin', {
+  lastModified: new Date(2017, 1, 1),
+});
+console.log(fileWithDate.lastModified); //returns 1485903600000
+
+var fileWithoutDate = new File([], 'file.bin');
+console.log(fileWithoutDate.lastModified); //returns current time
+</pre>
+
+<h2 id="Reduced_time_precision" name="Reduced_time_precision">時間の精度の低下</h2>
+
+<p>タイミング攻撃やフィンガープリンティングに対する保護機能を提供するために、<code>someFile.lastModified</code> の精度はブラウザーの設定に応じて丸められることがあります。<br>
+ Firefox では、<code>privacy.reduceTimerPrecision</code> 設定は既定で有効になっており、 Firefox 59 では既定で 20 us に設定されています。60 で 2 ms になります。</p>
+
+<pre class="brush: js">// reduced time precision (2ms) in Firefox 60
+someFile.lastModified;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+someFile.lastModified;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>Firefox では、<code>privacy.resistFingerprinting</code> を有効にすることもできます。精度は 100 ms か <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> のいずれか大きい方の値になります。</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('File API', '#file-attrs', 'lastModified')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</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("api.File.lastModified")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/ja/web/api/file/lastmodifieddate/index.html b/files/ja/web/api/file/lastmodifieddate/index.html
new file mode 100644
index 0000000000..571ffd8949
--- /dev/null
+++ b/files/ja/web/api/file/lastmodifieddate/index.html
@@ -0,0 +1,87 @@
+---
+title: File.lastModifiedDate
+slug: Web/API/File/lastModifiedDate
+tags:
+  - API
+  - File
+  - File API
+  - lastModifiedDate
+  - ファイル
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+  - 非推奨
+translation_of: Web/API/File/lastModifiedDate
+---
+<div>
+<p>{{APIRef("File API") }} {{deprecated_header}}</p>
+
+<p><code><strong>File.lastModifiedDate</strong></code><strong> </strong>読み取り専用プロパティは、ファイルの最終更新日を返します。最終更新日がわからないファイルは、現在の日付を返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="line-numbers  language-html notranslate"><code class="language-html">var time = instanceOfFile.lastModifiedDate</code></pre>
+
+<h3 id="値">値</h3>
+
+<p>ファイルが最後に変更された日時を示す <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> オブジェクトです。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js notranslate">var fileInput = document.getElementById("myfileinput");
+// fileInput は HTMLInputElement オブジェクトを参照するものとする: &lt;input type="file" multiple id="myfileinput"&gt;
+
+var files = fileInput.files;
+// files は (NodeList に似た) FileList オブジェクトを参照
+
+for (var i = 0; i &lt; files.length; i++) {
+  alert(
+    files[i].name +
+    " (最終更新日:  " +
+    files[i].lastModifiedDate +
+    ")"
+  );
+}
+</pre>
+
+<h2 id="短縮された時間精度">短縮された時間精度</h2>
+
+<p>タイミング攻撃やフィンガープリンティングに対する保護機能を提供するため、<code>someFile.lastModifiedDate.getTime()</code> の精度がブラウザの設定に応じて丸められることがあります。</p>
+
+<p>Firefox では、<code>privacy.reduceTimerPrecision</code> 設定はデフォルトで有効になっており、Firefox 59 ではデフォルトで 20 us に設定されています。60 で 2 ms になります。</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">// reduced time precision (2ms) in Firefox 60</span>
+someFile<span class="punctuation token">.</span>lastModifiedDate<span class="punctuation token">.</span><span class="function token">getTime</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// 1519211809934</span>
+<span class="comment token">// 1519211810362</span>
+<span class="comment token">// 1519211811670</span>
+<span class="comment token">// ...</span>
+
+
+<span class="comment token">// reduced time precision with `privacy.resistFingerprinting` enabled</span>
+someFile<span class="punctuation token">.</span>lastModifiedDate<span class="punctuation token">.</span><span class="function token">getTime</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// 1519129853500</span>
+<span class="comment token">// 1519129858900</span>
+<span class="comment token">// 1519129864400</span>
+<span class="comment token">// ...</span></code></pre>
+
+<p>Firefox では、<code>privacy.resistFingerprinting</code> を有効にすることもできます。精度は 100 ms か <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> のいずれか大きい方の値になります。</p>
+
+<h2 id="仕様">仕様</h2>
+
+<p><em>File API 仕様の初期のドラフトにありますが、このプロパティは削除されており、現在は非標準です。代わりに{{domxref("File.lastModified")}} を使用してください。</em></p>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div>
+
+<p>{{Compat("api.File.lastModifiedDate")}}</p>
+</div>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+</ul>
+</div>
diff --git a/files/ja/web/api/file/mozfullpath/index.html b/files/ja/web/api/file/mozfullpath/index.html
new file mode 100644
index 0000000000..d0daa94b99
--- /dev/null
+++ b/files/ja/web/api/file/mozfullpath/index.html
@@ -0,0 +1,19 @@
+---
+title: File.mozFullPath
+slug: Web/API/File/mozFullPath
+tags:
+  - API
+  - File
+  - File API
+  - Files
+  - NeedsContent
+  - mozFullPath
+  - ファイル
+  - プロパティ
+  - リファレンス
+  - 非標準
+translation_of: Web/API/File/mozFullPath
+---
+<p>{{APIRef("File API")}}{{draft}}{{Non-standard_header}}</p>
+
+<p><span class="seoSummary">{{domxref("File")}} インターフェイスに対する特権的な拡張として、<code><strong>mozFullPath</strong></code> プロパティには、表現されたファイルの絶対パス名が含まれます。</span> このプロパティはブラウザコード、または古いスタイルの XPCOM ベースの Firefox 拡張機能でのみ使用できます。Web コンテンツでは使用できません。</p>
diff --git a/files/ja/web/api/file/name/index.html b/files/ja/web/api/file/name/index.html
new file mode 100644
index 0000000000..d4877be4b9
--- /dev/null
+++ b/files/ja/web/api/file/name/index.html
@@ -0,0 +1,73 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - API
+  - File API
+  - Files
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/File/name
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>name</var> = <var>file</var>.name;</pre>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>"My Resume.rtf" のように、パスのないファイルの名前を含む文字列。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
+</pre>
+
+<pre class="brush: js">function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}</pre>
+
+<p>以下の結果を確認してください。</p>
+
+<p>{{ EmbedLiveSample('Example', 300, 50) }}</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('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<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("api.File.name")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの扱い</a></li>
+</ul>
diff --git a/files/ja/web/api/file/type/index.html b/files/ja/web/api/file/type/index.html
new file mode 100644
index 0000000000..260a470380
--- /dev/null
+++ b/files/ja/web/api/file/type/index.html
@@ -0,0 +1,72 @@
+---
+title: File.type
+slug: Web/API/File/type
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - ファイルタイプ
+  - プロパティ
+translation_of: Web/API/File/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("File")}} オブジェクトによって表されるファイルのメディアタイプ (<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>) を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js notranslate">var name = <var>file</var>.type;</pre>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>ファイルのタイプを示すメディアタイプ (MIME) を含む文字列。たとえば、 PNG 画像の場合は "image/png" です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: html notranslate">&lt;input type="file" multiple onchange="showType(this)"&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}</pre>
+
+<p><strong>メモ:</strong> 現在の実装に基づけば、ブラウザーは実際にファイルのバイトストリームを読み取ってメディアタイプを判断している訳ではありません。ファイルの拡張子に基づいて推測します。 PNG 画像ファイルを .txt に改名すると "<em>text/plain</em>" となり、"<em>image/png</em>" とはなりません。さらに <code>file.type</code> は一般的に、画像、 HTML 文書、音声、動画などの一般的なファイルタイプに対してのみ信頼できます。一般的ではないファイルの拡張子に対しては、空の文字列を返します。クライアントの構成 (Windows レジストリなど) によっては、一般的なタイプの場合でも予期しない値が発生することがあります。<strong>開発者は、このプロパティを唯一の検証方法として信頼しないことをお勧めします。</strong></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('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</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("api.File.type")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></li>
+ <li>ブログ記事: <a href="https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/">Be skeptical of client-reported MIME types</a></li>
+</ul>
diff --git a/files/ja/web/api/file/using_files_from_web_applications/index.html b/files/ja/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..07228aabd8
--- /dev/null
+++ b/files/ja/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,514 @@
+---
+title: Web アプリケーションからのファイルの使用
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Files
+  - HTML5
+  - Intermediate
+  - NeedsUpdate
+  - ajax upload
+  - upload
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>HTML5 から DOM に追加された File API によって、ウェブコンテンツがユーザーにローカルファイルを選択するように指示し、それらのファイルを読み取れるようになりました。この選択は HTML の <code>{{HTMLElement("input/file", '&lt;input type="file"&gt;')}}</code> 要素か、ドラッグ＆ドロップのどちらかを使用することで行うことができます。</p>
+
+<p>File API を拡張機能や他の chrome コードから利用することもできます。この場合、もういくつか知っておきたい機能があります。詳細は <a href="/ja/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">DOM File API を chrome code で使う</a> をご覧下さい。</p>
+
+<h2 id="Accessing_selected_files" name="Accessing_selected_files">選択されたファイルへのアクセス</h2>
+
+<p>この HTML を見てください。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input"&gt;</pre>
+
+<p>File API では、ユーザーが選択したファイルを表す {{DOMxRef("File")}} オブジェクトを含む {{DOMxRef("FileList")}} にアクセスすることができます。</p>
+
+<p><code>input</code> 要素の <code>multiple</code> 属性により、複数のファイルを選択することができます。</p>
+
+<p>旧来の DOM セレクターを使って、最初に選択されたファイルにアクセスします。</p>
+
+<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];</pre>
+
+<h3 id="Accessing_selected_files_on_a_change_event" name="Accessing_selected_files_on_a_change_event">change イベントでの選択されたファイルへのアクセス</h3>
+
+<p><code>change</code> イベントを通して {{DOMxRef("FileList")}} にアクセスすることも可能です (ただし必須ではありません)。このように {{DOMxRef("EventTarget.addEventListener()")}} を使って <code>change</code> イベントのリスナーを追加する必要があります。</p>
+
+<pre class="brush: js notranslate">const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* ファイルリストを処理するコードがここに入る */
+}</pre>
+
+<h2 id="Getting_information_about_selected_files" name="Getting_information_about_selected_files">選択されたファイルについての情報の取得</h2>
+
+<p>DOM が提供する {{DOMxRef("FileList")}} オブジェクトは、{{DOMxRef("File")}} オブジェクトとして指定された、ユーザーが選択したすべてのファイルをリストアップします。ファイルリストの <code>length</code> 属性の値をチェックすることで、ユーザーが選択したファイルの数を知ることができます。</p>
+
+<pre class="brush: js notranslate">const numFiles = fileList.length;</pre>
+
+<p>個々の {{DOMxRef("File")}} オブジェクトは、単に配列としてリストにアクセスするだけで取得できます。</p>
+
+<pre class="brush: js notranslate">for (let i = 0, numFiles = fileList.length; i &lt; numFiles; i++) {
+  const file = fileList[i];
+  // ...
+}
+</pre>
+
+<p>このループは、ファイルリスト内のすべてのファイルを繰り返し処理します。</p>
+
+<p>{{DOMxRef("File")}} オブジェクトには3つのプロパティがあり、ファイルに関する有益な情報を得られます。</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>読み取り専用の文字列としてのファイル名。これはファイル名のみで、パスに関する情報は含まれていません。</dd>
+ <dt><code>size</code></dt>
+ <dd>読み取り専用の64ビット整数によるバイト単位のファイルサイズです。</dd>
+ <dt><code>type</code></dt>
+ <dd>読み取り専用の文字列としてのファイルの MIME タイプ (読み取り専用)。MIME タイプが特定できないときは空文字列 (<code>""</code>) となります。</dd>
+</dl>
+
+<h3 id="Example_Showing_files_size" name="Example_Showing_files_size">例: ファイルサイズを表示</h3>
+
+<p>次のコードは <code>size</code> プロパティを利用する例です。</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;File(s) size&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;form name="uploadForm"&gt;
+    &lt;div&gt;
+      &lt;input id="uploadInput" type="file" name="myFiles" multiple&gt;
+      選択されたファイル: &lt;span id="fileNum"&gt;0&lt;/span&gt;;
+      合計サイズ: &lt;span id="fileSize"&gt;0&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;&lt;input type="submit" value="Send file"&gt;&lt;/div&gt;
+  &lt;/form&gt;
+
+  &lt;script&gt;
+  function updateSize() {
+    let nBytes = 0,
+        oFiles = this.files,
+        nFiles = oFiles.length;
+    for (let nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+      nBytes += oFiles[nFileId].size;
+    }
+    let sOutput = nBytes + " bytes";
+    // 倍数近似のための任意のコード
+    const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+    for (nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+      sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+    }
+    // 任意コードの末尾
+    document.getElementById("fileNum").innerHTML = nFiles;
+    document.getElementById("fileSize").innerHTML = sOutput;
+  }
+
+  document.getElementById("uploadInput").addEventListener("change", updateSize, false);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Using_hidden_file_input_elements_using_the_click_method" name="Using_hidden_file_input_elements_using_the_click_method">click() メソッドを使い input 要素を隠す</h2>
+
+<p>見た目の悪い {{HTMLElement("input")}} 要素を隠し、独自のインターフェイスでファイル選択を開き、ユーザーが選択したファイルを表示することができます。 input 要素のスタイルを <code>display: none</code> とし、その上で {{DOMxRef("HTMLElement.click","click()")}} メソッドを {{HTMLElement("input")}} に対して呼び出すことで実現できます。</p>
+
+<p>次のような HTML を考えてみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;button id="fileSelect"&gt;いくつかのファイルを選択します。&lt;/button&gt;</pre>
+
+<p><code>click</code> イベントを扱うコードは次のようなものです。</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+</pre>
+
+<p>ファイル選択を開く新しいボタンは、好きなようにスタイル付けできます。</p>
+
+<h2 id="Using_a_label_element_to_trigger_a_hidden_file_input_element" name="Using_a_label_element_to_trigger_a_hidden_file_input_element">label 要素を使用して隠した file input 要素を起動</h2>
+
+<p>JavaScript (click() メソッド) を使用せずにファイルピッカーを開けるようにするために、 {{HTMLElement("label")}} 要素を使用します。この場合、もし入力エレメントの <code>display: none</code> (または <code>visibility: hidden</code>) を設定して非表示に設定すると、ラベルがキーボードからアクセスできなくなります。代わりに、視覚的に非表示にする手法 (<a href="https://a11yproject.com/posts/how-to-hide-content/">visually-hidden technique</a>) を使用します。</p>
+
+<p>次の HTMLを見てください。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;いくつかのファイルを選択します。&lt;/label&gt;</pre>
+
+<p>そしてこの CSS です。</p>
+
+<pre class="brush: css notranslate">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* 互換性のための別ルールとして、最近の Firefox と Chrome では :focus-within が必要です。 */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p><code>fileElem.click()</code>を呼び出すための JavaScript コードを追加する必要はありません。またこの場合は、ラベル要素のスタイルを希望どおりに設定することもできます。前例のようにアウトラインに設定したり、background-color、box-shadow を設定したりして、ラベルの非表示入力フィールドのフォーカスステータスを視覚的に示す必要があります。(この記事を書いている時点では、Firefox は<code>&lt;input type="file"&gt;</code> 要素に対してこの視覚的な手がかりを表示していません)</p>
+
+<h2 id="Selecting_files_using_drag_and_drop" name="Selecting_files_using_drag_and_drop">ドラッグ &amp; ドロップを使用したファイルの選択</h2>
+
+<p>ユーザーがファイルをウェブアプリケーションにドラッグ &amp; ドロップすることもできます。</p>
+
+<p>最初のステップは、ドロップゾーンを確立することです。コンテンツのどの部分がドロップを受け入れるかは、アプリケーションの設計によって異なりますが、要素をドロップイベントを受け取るのは簡単です。</p>
+
+<pre class="brush: js notranslate">let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>この例では、ID <code>dropbox</code> を持つ要素をドロップゾーンに指定しています。これは、{{event('dragenter')}}、{{event('dragover')}}、および {{event('drop')}} イベントのリスナーを追加することで行われます。</p>
+
+<p>実際には、この場合、<code>dragenter</code>と<code>dragover</code>のイベントでは何もする必要はありませんので、これらの関数はどちらも簡単です。これらの関数はイベントの伝播を停止し、デフォルトのアクションが発生しないようにするだけです。</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>本当の魔術は <code>drop()</code> 関数の中で起こります。</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>ここでは、イベントから <code>dataTransfer</code> フィールドを取得し、そこからファイルリストを取得し、それを <code>handleFiles()</code> に渡します。これより先は、ユーザーが入力要素を使用したかドラッグ &amp; ドロップを使用するかどうかにかかわらず、ファイルの処理方法は全く同じです。</p>
+
+<h2 id="Example_Showing_thumbnails_of_user-selected_images" name="Example_Showing_thumbnails_of_user-selected_images">例: ユーザが選択した画像のサムネイルを表示</h2>
+
+<p>次の素晴らしい写真共有サイトを開発していて、ユーザーが実際に画像をアップロードする前に HTML を使って画像のサムネイルプレビューを表示させたいとしましょう。前に説明したように <code>input</code> 要素やドロップゾーンを設定し、次の <code>handleFiles()</code> のような関数を呼び出せば良いのです。</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (let i = 0; i &lt; files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // 「プレビュー」とは、コンテンツが表示される div 出力のことを想定しています。
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>ここでは、ユーザーが選択したファイルを処理するループが各ファイルの <code>type</code> 属性を見て、その MIME タイプが文字列 "image/" で始まるかどうかを確認しています)。画像である各ファイルに対して、新しい <code>img</code> 要素を作成します。CSS は、きれいな境界線や影を設定したり、画像のサイズを指定したりするために使用しますので、ここでは必要ありません。</p>
+
+<p>各画像には CSS クラス <code>obj</code> が追加されており、DOM ツリーで簡単に見つけることができます。また、各画像に <code>file</code> 属性を追加し、画像の {{DOMxRef("File")}} を指定しています。これにより、後で実際にアップロードする画像を取得することができます。{{DOMxRef("Node.appendChild()")}} を使用して、ドキュメントのプレビュー領域に新しいサムネイルを追加します。</p>
+
+<p>次に、画像の読み込みと <code>img</code> 要素へのアタッチを非同期で処理するための {{DOMxRef("FileReader")}} を確立します。新しい <code>FileReader</code> オブジェクトを作成した後、その <code>onload</code> 関数を設定し、<code>readAsDataURL()</code> を呼び出してバックグラウンドで読み込み処理を開始します。画像ファイルのコンテンツ全体が読み込まれると、それらは <code>data:</code> URL に変換され、<code>onload</code> コールバックに渡されます。このルーチンの実装では、<code>img</code> 要素の <code>src</code> 属性が読み込まれた画像に設定され、その結果、画像がユーザの画面のサムネイルに表示されます。</p>
+
+<h2 id="Using_object_URLs" name="Using_object_URLs">オブジェクト URL を利用する</h2>
+
+<p>DOM {{DOMxRef("URL.createObjectURL()")}} と {{DOMxRef("URL.revokeObjectURL()")}} メソッドを使用すると、ユーザーのコンピューター上のローカルファイルなど、DOM {{DOMxRef("File")}} オブジェクトを使用して参照可能なあらゆるデータを参照するために使用できるシンプルな URL 文字列を作成できます。</p>
+
+<p>HTML から URL で参照したい {{DOMxRef("File")}} オブジェクトがある場合は、次のようにオブジェクト URL を作成します。</p>
+
+<pre class="brush: js notranslate">const objectURL = window.URL.createObjectURL(fileObj);</pre>
+
+<p>オブジェクト URL は {{DOMxRef("File")}} オブジェクトを識別する文字列です。 {{DOMxRef("URL.createObjectURL()")}} を呼び出すたびに、すでにそのファイルのオブジェクト URL を作成していても、一意のオブジェクト URL が作成されます。これらはそれぞれ解除する必要があります。これらはドキュメントがアンロードされると自動的に解放されますが、ページが動的にこれらを使用している場合は {{DOMxRef("URL.revokeObjectURL()")}} を呼び出して明示的に解放する必要があります。</p>
+
+<pre class="brush: js notranslate">URL.revokeObjectURL(objectURL);</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_images" name="Example:_Using_object_URLs_to_display_images">例: オブジェクト URL で画像を表示</h2>
+
+<p>この例では、オブジェクト URL を使用して画像のサムネイルを表示しています。さらに、ファイル名やサイズなどの他のファイル情報も表示します。</p>
+
+<p>インターフェースとなる HTML は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;a href="#" id="fileSelect"&gt;いくつかのファイルを選択します。&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;選択されたファイルはありません!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>これにより、ファイル {{HTMLElement("input")}} 要素と、ファイル ピッカーを呼び出すリンクが確立されます (あまり美しくないファイル入力を非表示にするため)。これは、ファイル ピッカーを呼び出すメソッドと同様に、セクション {{anch("click() メソッドを使用して非表示のファイル入力要素を使用する")}} で説明されています。</p>
+
+<p><code>handleFiles()</code> メソッドは次のようになります。</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // "#" への移動を防ぐ
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "&lt;p&gt;ファイルが選択されていません!&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i &lt; this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>これは、{{HTMLElement("div")}} の URL を <code>fileList</code> という ID で取得することから始まります。これは、サムネイルを含むファイルリストを挿入するブロックです。</p>
+
+<p><code>handleFiles()</code> に渡された {{DOMxRef("FileList")}} オブジェクトが <code>null</code> の場合、ブロックの内部 HTML に「ファイルが選択されていません」と表示するように設定します。そうでない場合は、次のようにファイルリストの構築を開始します。</p>
+
+<ol>
+ <li>新しく順序なしリスト ({{HTMLElement("ul")}}) 要素を作成します</li>
+ <li>新しいリスト要素は、{{HTMLElement("div")}} ブロックの {{DOMxRef("Node.appendChild()")}} メソッドを呼び出して {{HTMLElement("div")}} ブロックに挿入されます</li>
+ <li><code>files</code> で表される {{DOMxRef("FileList")}} 内の各 {{DOMxRef("File")}} に対して次の処理を実行します
+  <ol>
+   <li>新しくリスト項目 ({{HTMLElement("li")}}) 要素を作成し、リストに挿入します</li>
+   <li>新しく画像 ({{HTMLElement("img")}}) 要素を作成します</li>
+   <li>{{DOMxRef("URL.createObjectURL()")}} を用いて、Blob の URL を作成して、画像のソースをファイルを表す新しいオブジェクト URL に設定します</li>
+   <li>画像の高さを60ピクセルに設定します</li>
+   <li>画像が読み込まれると不要になるため、画像の読み込みイベントハンドラを設定してオブジェクトの URL を解放します。これは {{DOMxRef("URL.revokeObjectURL()")}} メソッドを呼び出し、<code>img.src</code> で指定したオブジェクト URL 文字列を渡すことで行います</li>
+   <li>新しいリスト項目をリストに追加する</li>
+  </ol>
+ </li>
+</ol>
+
+<p>上のコードのライブデモはこちらです。</p>
+
+<p>{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}</p>
+
+<h2 id="Example_Uploading_a_user-selected_file" name="Example:_Uploading_a_user-selected_file">例: ユーザが選択したファイルを送信</h2>
+
+<p>もう１つは、ユーザーが選択したファイルやファイル (先ほどの例で選択した画像など) をサーバーにアップロードできるようにすることです。これは非常に簡単に非同期で行うことができます。</p>
+
+<h3 id="Creating_the_upload_tasks" name="Creating_the_upload_tasks">アップロードタスクの生成</h3>
+
+<p>前の例でサムネイルを作成したコードの続きで、すべてのサムネイル画像が CSS クラス <code>obj</code> にあり、対応する {{DOMxRef("File")}}} が <code>file</code> 属性に添付されていることを思い出してください。これにより、このように{{DOMxRef("Document.querySelectorAll()")}}を使用して、ユーザーがアップロードするために選択した画像をすべて選択することができます。</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>2 行目は、CSS クラス <code>obj</code> を持つドキュメント内のすべての要素の {{DOMxRef("NodeList")}}} を取得し <code>imgs</code> と呼ばれる変数に格納します。この例では、これらの要素はすべての画像サムネイルになります。このリストを取得したら、それを参照して、それぞれの新しい <code>FileUpload</code> インスタンスを作成するのは簡単です。それぞれが対応するファイルのアップロードを処理します。</p>
+
+<h3 id="Handling_the_upload_process_for_a_file" name="Handling_the_upload_process_for_a_file">ファイルのアップロード処理を行う</h3>
+
+<p><code>FileUpload</code> 関数は2つの入力、画像要素と画像データを読み込むファイルを受け付けます。</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>上の <code>FileUpload()</code> 関数は、進捗情報を表示するための throbber を作成し、データのアップロードを処理するための {{DOMxRef("XMLHttpRequest")}} を作成します。</p>
+
+<p>実際にデータを転送する前に、いくつかの準備段階があります。</p>
+
+<ol>
+ <li><code>XMLHttpRequest</code> のアップロード <code>progress</code> リスナーは、アップロードの進捗に応じて最新の情報に基づいて throbber が更新されるように、新しいパーセンテージ情報で throbber を更新するように設定されています</li>
+ <li><code>XMLHttpRequest</code> のアップロード <code>load</code> イベントハンドラは、進捗インジケータが実際に 100 % に達することを確認するために、throbber の進捗情報を 100 % に更新するように設定されています (プロセス中に粒度のクセがある場合)。そして、必要がなくなれば throbber を削除します。これにより、アップロードが完了すると throbber が消えます</li>
+ <li>画像ファイルをアップロードするリクエストは、<code>XMLHttpRequest</code> の <code>open()</code> メソッドを呼び出して POST リクエストを生成することで開始されます</li>
+ <li>アップロードの MIME タイプは <code>XMLHttpRequest</code> 関数の <code>overrideMimeType()</code> を呼び出して設定します。この場合、一般的な MIME タイプを使用しています。ユースケースによっては MIME タイプを設定する必要がない場合もあります</li>
+ <li><code>FileReader</code> オブジェクトを使用して、ファイルをバイナリ文字列に変換します</li>
+ <li>最後に、コンテンツがロードされると、<code>XMLHttpRequest</code> 関数の <code>send()</code> が呼び出され、ファイルのコンテンツがアップロードされます</li>
+</ol>
+
+<h3 id="Asynchronously_handling_the_file_upload_process" name="Asynchronously_handling_the_file_upload_process">ファイルのアップロード処理を非同期に扱う</h3>
+
+<p>この例では、サーバー側で PHP を使用し、クライアント側で JavaScript を使用して、ファイルの非同期アップロードを実演しています。</p>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // 例:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="application/javascript"&gt;
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // multipart/form-data のアップロードを開始します。
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_PDF" name="Example_Using_object_URLs_to_display_PDF">例: オブジェクト URL を使用して PDF を表示</h2>
+
+<p>オブジェクト URL は画像以外にも使用できます。埋め込まれた PDF ファイルや、ブラウザーで表示可能な他のリソースを表示するために使用できます。</p>
+
+<p>Firefox では、 PDF が iframe 内に埋め込まれて表示されるようにするには (ダウンロードファイルとして提案されるのではなく)、<code>pdfjs.disabled</code> の設定を <code>false</code> {{non-standard_inline()}} に設定する必要があります。</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>そして、<code>src</code> 属性の変更点はこちらです。</p>
+
+<pre class="brush: js notranslate">const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Example_Using_object_URLs_with_other_file_types" name="Example_Using_object_URLs_with_other_file_types">例: 他のファイル形式でのオブジェクト URL の使用</h2>
+
+<p>他の形式のファイルも同じように操作できます。ここでは、アップロードされた動画をプレビューする方法を紹介します。</p>
+
+<pre class="brush: js notranslate">const video = document.getElementById('video');
+const obj_url = URL.createObjectURL(blob);
+video.src = obj_url;
+video.play();
+URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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', 'number-state.html#concept-input-type-file-selected', 'File upload state')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{DOMxRef("File")}}</li>
+ <li>{{DOMxRef("FileList")}}</li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li>{{DOMxRef("URL")}}</li>
+ <li>{{DOMxRef("XMLHttpRequest")}}</li>
+ <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li>
+</ul>
diff --git a/files/ja/web/api/file/webkitrelativepath/index.html b/files/ja/web/api/file/webkitrelativepath/index.html
new file mode 100644
index 0000000000..91e010dd01
--- /dev/null
+++ b/files/ja/web/api/file/webkitrelativepath/index.html
@@ -0,0 +1,90 @@
+---
+title: File.webkitRelativePath
+slug: Web/API/File/webkitRelativePath
+tags:
+  - File
+  - File API
+  - File System API
+  - File and Directory Entries API
+  - Non-standard
+  - Web
+  - webkitRelativePath
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+  - 非標準
+translation_of: Web/API/File/webkitRelativePath
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p><code><strong>File.webkitRelativePath</strong></code> は、{{htmlattrxref("webkitdirectory", "input")}} 属性が設定された {{HTMLElement("input")}} 要素でユーザーが選択したディレクトリに対するファイルのパスを指定する {{domxref("USVString")}} を含む読み取り専用のプロパティです。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate"> <code><em>relativePath = File</em></code>.webkitRelativePath</pre>
+
+<h3 id="値">値</h3>
+
+<p>ユーザーが選択した先祖ディレクトリを基準にしたファイルのパスを含む {{domxref("USVString")}}。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、ユーザーが1つまたは複数のディレクトリを選択できるディレクトリピッカーが提示されています。{{event("change")}} イベントが発生すると、選択されたディレクトリ階層に含まれるすべてのファイルのリストが生成され、表示されます。</p>
+
+<h3 id="HTML_コンテンツ">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="filepicker" name="fileList" webkitdirectory multiple /&gt;
+&lt;ul id="listing"&gt;&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3>
+
+<pre class="brush: js notranslate">document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i&lt;files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="仕様">仕様</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('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}</td>
+   <td>{{ Spec2('File System API') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>この API には、公式の W3C または WHATWG 仕様はありません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換表は構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div>
+
+<p>{{Compat("api.File.webkitRelativePath")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li>{{domxref("HTMLInputElement.webkitEntries")}}</li>
+ <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li>
+</ul>