From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../web/api/datatransferitem/getasfile/index.html  | 94 ++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 files/zh-cn/web/api/datatransferitem/getasfile/index.html

(limited to 'files/zh-cn/web/api/datatransferitem/getasfile')

diff --git a/files/zh-cn/web/api/datatransferitem/getasfile/index.html b/files/zh-cn/web/api/datatransferitem/getasfile/index.html
new file mode 100644
index 0000000000..c1f1326629
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/getasfile/index.html
@@ -0,0 +1,94 @@
+---
+title: DataTransferItem.getAsFile()
+slug: Web/API/DataTransferItem/getAsFile
+tags:
+  - API
+  - DataTransferItem
+translation_of: Web/API/DataTransferItem/getAsFile
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>如果<strong><code>DataTransferItem</code></strong>是一个文件, 那 <strong><code>DataTransferItem.getAsFile()</code></strong>  方法将返回拖拽项数据的 {{domxref("File")}} 对象. 如果拖拽项的数据不是一个文件，则返回 <code>null</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>File</em> = <em>DataTransferItem</em>.getAsFile();
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p><em>无.</em></p>
+
+<h3 id="返回值">返回值</h3>
+
+<dl>
+ <dt>{{domxref("File")}}</dt>
+ <dd>如果拖拽项的对象是一个文件, 则返回 {{domxref("File")}} 对象; 否则返回 <code>null</code> .</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面这个例子中使用 <code>getAsFile()</code> 。放在 {{event("drop")}} 事件处理里面.</p>
+
+<pre class="brush: js">function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = event.dataTransfer.items;
+ for (var i = 0; i &lt; data.length; i += 1) {
+   if ((data[i].kind == 'string') &amp;&amp;
+       (data[i].type.match('^text/plain'))) {
+     // 遍历拖拽项的内容
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/html'))) {
+     // 拖拽项的数据是 HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/uri-list'))) {
+     // 拖拽项的数据是URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &amp;&amp;
+              (data[i].type.match('^image/'))) {
+     // 拖拽项的数据是一个图片
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitem-getasfile','getAsFile()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial value</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-getasfile','getAsFile()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of the HTML WHATWG document</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+
+
+<p>{{Compat("api.DataTransferItem.getAsFile")}}</p>
+
+<h2 id="查看更多">查看更多</h2>
+
+<ul>
+ <li>{{domxref("DataTransfer.files()")}}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf