From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../web/api/filereader/abort_event/index.html | 175 +++++++++++++++++++++ .../index.html" | 175 --------------------- 2 files changed, 175 insertions(+), 175 deletions(-) create mode 100644 files/zh-cn/web/api/filereader/abort_event/index.html delete mode 100644 "files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" (limited to 'files/zh-cn/web/api/filereader') diff --git a/files/zh-cn/web/api/filereader/abort_event/index.html b/files/zh-cn/web/api/filereader/abort_event/index.html new file mode 100644 index 0000000000..8e36dbb3dd --- /dev/null +++ b/files/zh-cn/web/api/filereader/abort_event/index.html @@ -0,0 +1,175 @@ +--- +title: 'FileReader: 中止事件(abort)' +slug: Web/API/FileReader/中止事件(abort) +tags: + - API + - FileReader + - ProgressEvent + - Reference + - Web + - abort + - 中止 + - 事件 +translation_of: Web/API/FileReader/abort_event +--- +
{{APIRef}}
+ +

在中止读取时会触发 abort 事件: 例如程序调用{{domxref("FileReader.abort()")}}.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
可取消No
接口{{domxref("ProgressEvent")}}
事件处理属性{{domxref("FileReader.onabort")}}
+ +

例子

+ +

实例

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">选择你的头像:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="图像预览...">
+
+    <div class="event-log">
+        <label>事件日志:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+    reader.abort();
+}
+
+fileInput.addEventListener('change', handleSelected);返回返回发的
+
+ +

返回结果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

参数

+ + + + + + + + + + + + + + +
参数状态
{{SpecName('File API', '#dfn-abort-event')}}{{Spec2('File API')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.FileReader.abort_event")}}

+ +

另请参见

+ + diff --git "a/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" "b/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" deleted file mode 100644 index 8e36dbb3dd..0000000000 --- "a/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: 'FileReader: 中止事件(abort)' -slug: Web/API/FileReader/中止事件(abort) -tags: - - API - - FileReader - - ProgressEvent - - Reference - - Web - - abort - - 中止 - - 事件 -translation_of: Web/API/FileReader/abort_event ---- -
{{APIRef}}
- -

在中止读取时会触发 abort 事件: 例如程序调用{{domxref("FileReader.abort()")}}.

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
可取消No
接口{{domxref("ProgressEvent")}}
事件处理属性{{domxref("FileReader.onabort")}}
- -

例子

- -

实例

- -

HTML

- -
<div class="example">
-
-    <div class="file-select">
-        <label for="avatar">选择你的头像:</label>
-        <input type="file"
-               id="avatar" name="avatar"
-               accept="image/png, image/jpeg">
-    </div>
-
-    <img src="" class="preview" height="200" alt="图像预览...">
-
-    <div class="event-log">
-        <label>事件日志:</label>
-        <textarea readonly class="event-log-contents"></textarea>
-    </div>
-
-  </div>
- - - -

JS

- -
const fileInput = document.querySelector('input[type="file"]');
-const preview = document.querySelector('img.preview');
-const eventLog = document.querySelector('.event-log-contents');
-const reader = new FileReader();
-
-function handleEvent(event) {
-    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
-
-    if (event.type === "load") {
-        preview.src = reader.result;
-    }
-}
-
-function addListeners(reader) {
-    reader.addEventListener('loadstart', handleEvent);
-    reader.addEventListener('load', handleEvent);
-    reader.addEventListener('loadend', handleEvent);
-    reader.addEventListener('progress', handleEvent);
-    reader.addEventListener('error', handleEvent);
-    reader.addEventListener('abort', handleEvent);
-}
-
-function handleSelected(e) {
-    eventLog.textContent = '';
-    const selectedFile = fileInput.files[0];
-    if (selectedFile) {
-        addListeners(reader);
-        reader.readAsDataURL(selectedFile);
-    }
-    reader.abort();
-}
-
-fileInput.addEventListener('change', handleSelected);返回返回发的
-
- -

返回结果

- -

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

- -

参数

- - - - - - - - - - - - - - -
参数状态
{{SpecName('File API', '#dfn-abort-event')}}{{Spec2('File API')}}
- -

浏览器兼容性

- - - -

{{Compat("api.FileReader.abort_event")}}

- -

另请参见

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