忘记input标签，巧用新API轻松实现图片上传预览

前端

2023-09-03 19:00:29

告别陈旧的input标签

input标签长期以来一直是上传和预览图片的标准方式，但它有着固有的局限性。它既繁琐又容易出错，需要大量的代码和额外的处理，而且在用户体验方面缺乏灵活性。

拥抱创新的showOpenFilePicker

showOpenFilePicker API带来了革命性的变化，它提供了一个简单、高效的替代方案，让您可以绕过input标签，同时增强用户体验。这个新API允许您直接从文件系统中选择文件，而无需任何额外的用户交互。

showOpenFilePicker的强大功能

showOpenFilePicker API具有以下令人印象深刻的功能：

无缝集成： 它与现代浏览器无缝集成，提供一致且直观的用户体验，无论操作系统或设备如何。
简化的代码： 与input标签相比，它需要更少的代码和更简单的实现，从而简化了您的web开发过程。
增强的安全性： 它提供了更高的安全性级别，因为用户只能选择他们有权访问的文件。
跨平台兼容性： 它跨平台兼容，在台式机、移动设备和混合环境中都能正常工作。

分步实现指南

使用showOpenFilePicker API实现图片上传和预览的过程简单明了。只需遵循以下步骤：

加载文件API： 在您的代码中加载File API，这是showOpenFilePicker API的基础。
创建文件选择器： 使用showOpenFilePicker()方法创建一个文件选择器，它会返回一个包含用户选择的文件的Promise对象。
处理用户选择： 使用Promise.then()方法处理用户选择，然后获取选定的文件并执行必要的操作。
预览图片： 使用FileReader API预览选定的图片，该API允许您读取文件内容并在页面上显示它们。

示例代码

以下示例代码演示了如何使用showOpenFilePicker API上传和预览图片：

document.getElementById('btn-upload').addEventListener('click', async () => {
  const [file] = await showOpenFilePicker(['image/png', 'image/jpeg']);
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    const preview = document.getElementById('preview');
    preview.src = reader.result;
  };
  reader.readAsDataURL(file);
});