原生js FileReader对象实现图片上传本地预览效果

本文将为您展示如何使用原生JavaScript的FileReader对象实现图片上传并本地预览的效果。对于热爱编程的朋友们，这是一个值得参考的实例。

让我们在HTML文档中创建一个简单的界面。包含一个文件输入元素用于选择图片，以及一个用于显示图片的容器。

在CSS部分，我们设置了样式以使页面看起来更美观。然后，我们将使用JavaScript来处理图片上传和预览。

当用户在文件输入元素中选择一个或多个文件时，会触发`onchange`事件。在事件处理函数中，我们首先清空显示图片的容器，然后遍历选中的文件。对于每个文件，我们检查其是否为图片类型（jpg、png或jpeg）。如果是，我们使用`createObjectURL`函数创建该文件的URL，并将其设置为img元素的src属性，然后将img元素添加到显示图片的容器中。

以下是具体的代码实现：

```html