diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/api/filereader/中止事件(abort)/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/api/filereader/中止事件(abort)/index.html')
-rw-r--r-- | files/zh-cn/web/api/filereader/中止事件(abort)/index.html | 175 |
1 files changed, 0 insertions, 175 deletions
diff --git a/files/zh-cn/web/api/filereader/中止事件(abort)/index.html b/files/zh-cn/web/api/filereader/中止事件(abort)/index.html deleted file mode 100644 index 8e36dbb3dd..0000000000 --- a/files/zh-cn/web/api/filereader/中止事件(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 ---- -<div>{{APIRef}}</div> - -<p>在中止读取时会触发 <code>abort</code> 事件: 例如程序调用{{domxref("FileReader.abort()")}}.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Bubbles</th> - <td>No</td> - </tr> - <tr> - <th scope="row">可取消</th> - <td>No</td> - </tr> - <tr> - <th scope="row">接口</th> - <td>{{domxref("ProgressEvent")}}</td> - </tr> - <tr> - <th scope="row">事件处理属性</th> - <td>{{domxref("FileReader.onabort")}}</td> - </tr> - </tbody> -</table> - -<h2 id="例子">例子</h2> - -<h3 id="实例">实例</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><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></pre> - -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">img.preview { - margin: 1rem 0; -} - -.event-log-contents { - width: 18rem; - height: 5rem; - border: 1px solid black; - margin: .2rem; - padding: .2rem; -} - -.example { - display: grid; - grid-template-areas: - "select log" - "preview log"; -} - -.file-select { - grid-area: select; -} - -.preview { - grid-area: preview; -} - -.event-log { - grid-area: log; -} - -.event-log>label { - display: block; -} - -.event-log-contents { - resize: none; -}</pre> -</div> - -<h4 id="JS">JS</h4> - -<pre class="brush: js notranslate">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);返回返回发的 -</pre> - -<h4 id="返回结果">返回结果</h4> - -<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p> - -<h2 id="参数">参数</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">参数</th> - <th scope="col">状态</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', '#dfn-abort-event')}}</td> - <td>{{Spec2('File API')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果你想对数据有所贡献,请查看https://github.com/mdn/browser-compat-data并向我们发送请求。</div> - -<p>{{Compat("api.FileReader.abort_event")}}</p> - -<h2 id="另请参见">另请参见</h2> - -<ul> - <li>相关事件: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.loadend_event", "loadend")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.load_event", "load")}}.</li> -</ul> |