如何使用 HTML5 在上传之前预览图像？

上传前预览图像

在 Web 开发中，在用户提交图像之前为用户提供图像预览可能会很有帮助。这允许用户在上传之前确保图像正确，从而潜在地减少错误和返工的数量。

解决方案：HTML5 文件接口

幸运的是，HTML5文件接口提供了一种在浏览器中预览图像的简单方法，无需发出服务器请求或使用 Ajax。其工作原理如下：

1.创建图像元素

创建 HTML 带有 id 的元素（例如 blah）来显示图像预览。

2.从输入获取文件

将 onchange 事件处理程序添加到文件输入元素。选择文件后，事件处理程序会从输入元素中提取所选文件。

3.使用文件接口

使用 URL.createObjectURL() 方法为所选文件创建对象 URL。这将创建一个临时 URL，允许浏览器显示图像。

4.更新图片源

设置的src属性元素到对象 URL。这将显示所选图像的预览。

示例代码

<input accept="image/*" type='file'>

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

以上是如何使用 HTML5 在上传之前预览图像？的详细内容。更多信息请关注PHP中文网其他相关文章！