FileReader实例化：为何要先创建对象再进行文件读取？-js教程-PHP中文网

FileReader实例化：为何要先创建对象再进行文件读取？

DDD

发布： 2024-11-16 22:03:02

原创

854人浏览过

filereader实例化：为何要先创建对象再进行文件读取？

读取文件的 io 操作为何要先实例化 filereader？

当使用 html 元素 filereader 实例，然后通过其方法来处理文件。那么问题来了，为什么不能直接将文件传递给 filereader 构造函数，但为什么要先创建一个实例，然后再做一些事情呢？

创建 filereader 实例的原因

filereader 实例化允许我们扩展文件处理逻辑。

例如，考虑以下代码：

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

登录后复制

假设此后我们收到文件太大并且读取的反馈过程需要很长时间。在这种情况下，给定 filereader 实例，我们可以轻松添加事件处理程序来跟踪进度。

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

// Добавлено
filereader.addeventlistener('progress', (ev) => {
  console.log(`Загружено ${ev.loaded} из ${ev.total}`);
});

登录后复制

如果我们稍后需要添加中止下载按钮，我们可以再次使用 filereader 实例并调用 abort( ) 方法来中止读取过程。

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

// Добавлено
filereader.addeventlistener('progress', (ev) => {
  console.log(`Загружено ${ev.loaded} из ${ev.total}`);
});

// Добавлено
cancel.addeventlistener('click', () => {
  filereader.abort();
}, { once: true });

登录后复制

因此实例化 filereader 可以让我们更灵活地使用其方法，并允许我们做更多事情。

为什么我们不能传递一个文件直接传递给 filereader 构造函数？

在 java 等语言中，类构造函数可以采用参数来初始化对象。然而，在 javascript 中，创建类的实例，然后将参数传递给它来执行操作是很常见的。

有些人认为创建实例并随后立即调用方法可能会导致加载文件时出现混乱在构造函数中。将实例化与方法调用分开有助于避免歧义。

此外，将 filereader 与方法调用分开实例化可以允许重复使用它的一个实例，例如：

const input = document.getelementbyid('input');

// Используем один экземпляр
const filereader = new filereader();

input.onchange = () => {
  const file = input.files?.item(0);
  if (!file) return;

  filereader.readastext(file);
  filereader.onload = () => {
    console.log(filereader.result);
  };
};

登录后复制

这样我们减少创建的 filereader 实例的数量。

filereader 替代方案

有适合检索不同类型数据的 filereader 替代方案。让我们看一些示例：

文本：使用 file 对象的 text() 方法，例如：

const file = input.files?.item(0);
const text = await file.text();

登录后复制

图片：为标签创建临时url并显示图片，加载后释放url：

const file = input.files?.item(0);
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
img.addEventListener('load', () => {
  URL.revokeObjectURL(blobURL);
});

登录后复制

以上就是FileReader实例化：为何要先创建对象再进行文件读取？的详细内容，更多请关注php中文网其它相关文章！