Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/FileReader/progress_event below:

FileReader：progress 事件 - Web API

Baseline Widely available

备注： 此特性在 Web Worker 中可用。

FileReader 接口的 progress 事件在 FileReader 读取数据时定期触发。

此事件不可取消且不会冒泡。

在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

addEventListener("progress", (event) => {});

onprogress = (event) => {};

还继承其父级 Event 的属性。

ProgressEvent.lengthComputable 只读

一个布尔标志，指示底层进程要完成的总工作量以及已完成的工作量是否可计算。换句话说，它表明进展是否可衡量。

ProgressEvent.loaded 只读

一个 64 位无符号整数值，指示底层进程已执行的工作量。完成工作的比率可以通过将该属性的值除以 total 来计算。使用 HTTP 下载资源时，仅计算 HTTP 消息的正文，不包括标头和其他开销。

ProgressEvent.total 只读

一个 64 位无符号整数，表示底层进程正在执行的工作总量。使用 HTTP 下载资源时，这是 Content-Length（消息正文的大小），不包括标头和其他开销。

<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 for="eventLog">事件日志：</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>

img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
  resize: none;
}

.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;
}

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 += `${event.type}：传输了 ${event.loaded} 字节\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);
  }
}

fileInput.addEventListener("change", handleSelected);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4