diff options
Diffstat (limited to 'files/zh-cn/web/api/filereader/abort_event')
| -rw-r--r-- | files/zh-cn/web/api/filereader/abort_event/index.html | 175 |
1 files changed, 175 insertions, 0 deletions
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 +--- +<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> |