From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/datatransferitem/getasfile/index.html | 94 +++++++++++ .../api/datatransferitem/getasstring/index.html | 102 ++++++++++++ files/zh-cn/web/api/datatransferitem/index.html | 121 ++++++++++++++ .../zh-cn/web/api/datatransferitem/kind/index.html | 96 +++++++++++ .../zh-cn/web/api/datatransferitem/type/index.html | 87 ++++++++++ .../datatransferitem/webkitgetasentry/index.html | 179 +++++++++++++++++++++ 6 files changed, 679 insertions(+) create mode 100644 files/zh-cn/web/api/datatransferitem/getasfile/index.html create mode 100644 files/zh-cn/web/api/datatransferitem/getasstring/index.html create mode 100644 files/zh-cn/web/api/datatransferitem/index.html create mode 100644 files/zh-cn/web/api/datatransferitem/kind/index.html create mode 100644 files/zh-cn/web/api/datatransferitem/type/index.html create mode 100644 files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html (limited to 'files/zh-cn/web/api/datatransferitem') 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 +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

如果DataTransferItem是一个文件, 那 DataTransferItem.getAsFile()  方法将返回拖拽项数据的 {{domxref("File")}} 对象. 如果拖拽项的数据不是一个文件，则返回 null.

+ +

语法

+ +
File = DataTransferItem.getAsFile();
+
+ +

参数

+ +

无.

+ +

返回值

+ +
+
{{domxref("File")}}
+
如果拖拽项的对象是一个文件, 则返回 {{domxref("File")}} 对象; 否则返回 null .
+
+ +

例子

+ +

下面这个例子中使用 getAsFile() 。放在 {{event("drop")}} 事件处理里面.

+ +
function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = event.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+   if ((data[i].kind == 'string') &&
+       (data[i].type.match('^text/plain'))) {
+     // 遍历拖拽项的内容
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/html'))) {
+     // 拖拽项的数据是 HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/uri-list'))) {
+     // 拖拽项的数据是URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &&
+              (data[i].type.match('^image/'))) {
+     // 拖拽项的数据是一个图片
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitem-getasfile','getAsFile()')}}{{Spec2('HTML WHATWG')}}Initial value
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-getasfile','getAsFile()')}}{{Spec2('HTML5.1')}}Snapshot of the HTML WHATWG document
+ +

浏览器兼容

+ + + +

{{Compat("api.DataTransferItem.getAsFile")}}

+ +

查看更多

+ + diff --git a/files/zh-cn/web/api/datatransferitem/getasstring/index.html b/files/zh-cn/web/api/datatransferitem/getasstring/index.html new file mode 100644 index 0000000000..3b8147f7f6 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitem/getasstring/index.html @@ -0,0 +1,102 @@ +--- +title: DataTransferItem.getAsString() +slug: Web/API/DataTransferItem/getAsString +translation_of: Web/API/DataTransferItem/getAsString +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

 DataTransferItem.getAsString()  当DataTransferItem对象的kind属性是一个普通Unicode字符串时，该方法会用 DataTransferItem对象的kind属性作为入参来执行传入的回调函数 (i.e. kind is string).

+ +

示例

+ +
dataTransferItem.getAsString(callback);
+
+ +

Parameters

+ +
+
callback
+
A callback function that has access to the {{domxref("DataTransferItem","data transfer item's")}} string data. See {{anch("Callback")}} below for details.
+
+ +

Return value

+ +

{{jsxref("undefined")}}

+ +

Callback

+ +

The callback parameter is a callback function which accepts one parameter:

+ +
+
{{domxref("DOMString")}}
+
The drag data item's string data.
+
+ +

The callback return value is undefined.

+ +

Example

+ +

This example shows the use of the getAsString() method as an inline function in a {{event("drop")}} event handler.

+ +
function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+   if ((data[i].kind == 'string') &&
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/uri-list'))) {
+     // Drag data item is URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &&
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitem-getasstring','getAsString()')}}{{Spec2('HTML WHATWG')}}Initial definition.
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-getasstring','getAsString()')}}{{Spec2('HTML5.1')}}Snapshot fo HTML WHATWG document
+ +

Browser compatibility

+ + + +

{{Compat("api.DataTransferItem.getAsString")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/datatransferitem/index.html b/files/zh-cn/web/api/datatransferitem/index.html new file mode 100644 index 0000000000..1f05ea0fb9 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitem/index.html @@ -0,0 +1,121 @@ +--- +title: DataTransferItem +slug: Web/API/DataTransferItem +translation_of: Web/API/DataTransferItem +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransferItem 描述了一个拖拽项。在一个拖拽操作中，每一个 {{domxref("DragEvent","drag event")}} 都有一个{{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性，它包含一个存有拖拽数据的 {{domxref("DataTransferItemList","list")}} ，其中每一项都是一个 DataTransferItem 。

+ +

这个接口没有构造函数。

+ +

属性

+ +
+
{{domxref("DataTransferItem.kind")}} {{readonlyInline}}
+
拖拽项的种类，string 或是 file。
+
{{domxref("DataTransferItem.type")}} {{readonlyInline}}
+
拖拽项的类型，一般是一个MIME 类型.
+
+ +

方法

+ +
+
{{domxref("DataTransferItem.getAsFile()")}}
+
返回一个关联拖拽项的 {{domxref("File")}} 对象 （当拖拽项不是一个文件时返回 null）。
+
{{domxref("DataTransferItem.getAsString()")}}
+
使用拖拽项的字符串作为参数执行指定回调函数。
+
{{domxref("DataTransferItem.webkitGetAsEntry()")}} {{Non-standard_inline}}
+
返回一个基于 {{domxref("FileSystemEntry")}} 的对象来表示文件系统中选中的项目。通常是返回一个{{domxref("FileSystemFileEntry")}} 或是 {{domxref("FileSystemDirectoryEntry")}} 对象.
+
+ +

例子

+ +

这个接口所有的属性和方法都有自己的介绍页，请到各自的介绍页中查看示例用法。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#datatransferitem','DataTransferItem')}}{{Spec2('HTML WHATWG')}}初始定义
{{SpecName('HTML5.1', 'editing.html#datatransferitem','DataTransferItem')}}{{Spec2('HTML5.1')}}W3C snapshot of WHATWG
{{SpecName('File System API', '#dom-datatransferitem-webkitgetasentry', 'DataTransferItem.webkitGetAsEntry()')}}{{Spec2('File System API')}}File and Directory Entries API 中定义了webkitGetAsEntry()
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop(50)}}{{CompatNo}}12{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/zh-cn/web/api/datatransferitem/kind/index.html b/files/zh-cn/web/api/datatransferitem/kind/index.html new file mode 100644 index 0000000000..e475661971 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitem/kind/index.html @@ -0,0 +1,96 @@ +--- +title: DataTransferItem.kind +slug: Web/API/DataTransferItem/kind +tags: + - API + - DataTransferItem + - HTML DOM + - HTML Drag and Drop API + - Property + - Reference + - drag and drop + - kind +translation_of: Web/API/DataTransferItem/kind +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransferItem.kind 是一个只读属性，它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项(drag data item)的类型: 一些文本或者一些文件。

+ +

语法

+ +
var itemKind = DataTransferItem.kind;
+
+ +

返回值

+ +

 {{domxref("DOMString")}} 用来表示拖拽项(drag data item)的类型. 它的值必须是以下值中的一个:

+ +
+
'file'
+
拖拽项是一个文件。
+
'string'
+
拖拽项是一个普通的 Unicode 字符。
+
+ +

例子

+ +

下面这个例子是 kind 属性的用法.

+ +
function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = event.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+   if ((data[i].kind == 'string') &&
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'file') &&
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitem-kind','kind')}}{{Spec2('HTML WHATWG')}}Initial version
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-kind','kind')}}{{Spec2('HTML5.1')}}W3C snapshot of the WHATWG document.
+ +

浏览器兼容性

+ + + +

{{Compat("api.DataTransferItem.kind")}}

+ +

查看更多

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

+ +

 

diff --git a/files/zh-cn/web/api/datatransferitem/type/index.html b/files/zh-cn/web/api/datatransferitem/type/index.html new file mode 100644 index 0000000000..10acc277d1 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitem/type/index.html @@ -0,0 +1,87 @@ +--- +title: DataTransferItem.type +slug: Web/API/DataTransferItem/type +translation_of: Web/API/DataTransferItem/type +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

只读属性DataTransferItem.type 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型（格式）。  type 是一个Unicode字符串，通常由MIME给出，不过不需要MIME类型。

+ +

举例一些类型: text/plain 和 text/html.

+ +

语法

+ +
dataItem.type;
+
+ +

返回值

+ +

一个代表拖动数据项类型的 {{domxref("DOMString")}}。

+ +

示例

+ +

这个例子演示了type 属性的用法。

+ +
function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+   if ((data[i].kind == 'string') &&
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &&
+              (data[i].type.match('^text/uri-list'))) {
+     // Drag data item is URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &&
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransferitem-type','type')}}{{Spec2('HTML WHATWG')}}Initial version
{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-type','type')}}{{Spec2('HTML5.1')}}Snapshot of the HTML WHATWG document
+ +

浏览器兼容性

+ + + +

{{Compat("api.DataTransferItem.type")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html new file mode 100644 index 0000000000..dc0cb8a184 --- /dev/null +++ b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html @@ -0,0 +1,179 @@ +--- +title: DataTransferItem.webkitGetAsEntry() +slug: Web/API/DataTransferItem/webkitGetAsEntry +translation_of: Web/API/DataTransferItem/webkitGetAsEntry +--- +

如果由文件描述的项目DataTransferItem是文件，则webkitGetAsEntry()返回FileSystemFileEntry或FileSystemDirectoryEntry表示它。如果该项不是文件，null则返回。

+ +
+

此功能webkitGetAsEntry()在此时非包含Firefox的非WebKit浏览器中实现; 它可能会getAsEntry()在以后简单地重命名，所以你应该进行防御性编码，寻找两者。

+
+ +

语法

+ +
DataTransferItem.webkitGetAsEntry();
+ +

参数

+ +

没有。

+ +

返回值

+ +

FileSystemEntry基于A 的对象描述被删除的项目。这将是FileSystemFileEntry或FileSystemDirectoryEntry。

+ +

示例

+ +

在此示例中，创建了一个放置区域，该放置区域drop通过扫描已删除的文件和目录来响应事件，从而输出分层目录列表。

+ +

HTML内容

+ +

HTML建立了放置区本身，它是<div>具有ID 的元素"dropzone"，以及带有ID 的无序列表元素"listing"。

+ +
<p>Drag files and/or directories to the box below!</p>
+
+<div id="dropzone">
+  <div id="boxtitle">
+    Drop Files Here
+  </div>
+</div>
+
+<h2>Directory tree:</h2>
+
+<ul id="listing">
+</ul>
+ +

CSS内容

+ +

此处显示示例使用的样式。

+ +
#dropzone {
+  text-align: center;
+  width: 300px;
+  height: 100px;
+  margin: 10px;
+  padding: 10px;
+  border: 4px dashed red;
+  border-radius: 10px;
+}
+
+#boxtitle {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  color: black;
+  font: bold 2em "Arial", sans-serif;
+  width: 300px;
+  height: 100px;
+}
+
+body {
+  font: 14px "Arial", sans-serif;
+}
+ +

JavaScript内容

+ +

首先，让我们看一下递归scanFiles()函数。该函数将FileSystemEntry表示要扫描和处理的文件系统中的条目（item参数）和插入内容列表（container参数）的元素作为输入。

+ +
+

请注意，要读取目录中的所有文件，readEntries需要重复调​​用，直到它返回一个空数组。在基于Chromium的浏览器中，以下示例仅返回最多100个条目。

+
+ +
let dropzone = document.getElementById("dropzone");
+let listing = document.getElementById("listing");
+
+function scanFiles(item, container) {
+  let elem = document.createElement("li");
+  elem.innerHTML = item.name;
+  container.appendChild(elem);
+
+ if (item.isDirectory) {
+    let directoryReader = item.createReader();
+    let directoryContainer = document.createElement("ul");
+    container.appendChild(directoryContainer);
+    directoryReader.readEntries(function(entries) {
+        entries.forEach(function(entry) {
+          scanFiles(entry, directoryContainer);
+      });
+    });
+  }
+}
+
+ +

scanFiles()首先创建一个新<li>元素来表示正在扫描的项目，将项目的名称作为文本内容插入其中，然后将其附加到容器中。容器在此示例中始终是列表元素，您很快就会看到。

+ +

一旦当前项目在列表中，isDirectory就会检查项目的属性。如果该项目是目录，我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto来处理获取目录的内容。这是通过调用item的createReader()方法完成的。然后<ul>创建一个new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。

+ +

之后，directoryReader.readEntries()调用读取目录中的所有条目。反过来，这些都被传递到递归调用scanFiles()以处理它们。其中任何文件都只是插入到列表中; 将任何目录插入到列表中，并在下面添加列表层次结构的新级别，依此类推。

+ +

然后是事件处理程序。首先，我们阻止dragover事件由默认处理程序处理，以便我们的drop区域可以接收drop：

+ +
dropzone.addEventListener("dragover", function(event) {
+    event.preventDefault();
+}, false);
+
+ +

当然，关闭所有事件的事件处理程序是事件的处理程序drop：

+ +
dropzone.addEventListener("drop", function(event) {
+  let items = event.dataTransfer.items;
+
+  event.preventDefault();
+  listing.innerHTML = "";
+
+  for (let i=0; i<items.length; i++) {
+    let item = items[i].webkitGetAsEntry();
+
+    if (item) {
+        scanFiles(item, listing);
+    }
+  }
+}, false);
+ +

这将获取DataTransferItem表示从中删除的项目的对象列表event.dataTransfer.items。然后我们打电话Event.preventDefault()来防止事件在完成后被进一步处理。

+ +

现在是时候开始构建列表了。首先，通过设置listing.innerHTML为空来清空列表。这使我们ul开始插入目录条目为空。

+ +

然后我们遍历已删除项目列表中的项目。对于每一个，我们调用它的webkitGetAsEntry()方法来获得FileSystemEntry表示文件。如果成功，我们会调用scanFiles()处理项目 - 如果它只是一个文件，或者添加它，如果它是一个目录，则将其添加到列表中。

+ +

结果

+ +

你可以通过下面的尝试看看它是如何工作的。 找到一些文件和目录并将其拖入，然后查看生成的输出。

+ +

{{ EmbedLiveSample('Example', 600, 400) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("File System API", "#dom-datatransferitem-webkitgetasentry", "webkitGetAsEntry()") }}{{ Spec2("File System API") }}初始规格。
+ +

此API没有官方的W3C或WHATWG规范。

+ +

浏览器兼容性

+ + + +

{{COMPAT("api.DataTransferItem.webkitGetAsEntry")}}

+ +

也可以看看

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