HTML本地上传图片并显示

最新推荐文章于 2024-07-24 16:08:38 发布

学不会的码农

最新推荐文章于 2024-07-24 16:08:38 发布

阅读量2k

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_46650094/article/details/129913682

版权

这段代码创建了一个包含文件选择器和图片预览的简单 HTML 页面，并使用 JavaScript 监听文件选择器的 onchange 事件。一旦用户选择了一个文件，JavaScript 就会使用 FileReader API 读取文件并将其转换为数据 URL。然后，JavaScript 将数据 URL 设置为图片预览的 src 属性，以显示该图片。
首先是HTML部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传图片并显示</title>
  </head>
  <body>
    <input type="file" id="fileInput">
    <br>
    <img id="imagePreview" src="#" alt="图片预览">
    <script src="script.js"></script>
  </body>
</html>

JavaScript 代码，我这里是在同一目录下创建了名为script.js的文件

const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  if (file) {
    const reader = new FileReader();
    reader.addEventListener('load', function() {
      imagePreview.setAttribute('src', this.result);
    });
    reader.readAsDataURL(file);
  }
});

学不会的码农

关注

0
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML本地上传图片并显示

这段代码创建了一个包含文件选择器和图片预览的简单 HTML 页面，并使用 JavaScript 监听文件选择器的 onchange 事件。一旦用户选择了一个文件，JavaScript 就会使用 FileReader API 读取文件并将其转换为数据 URL。然后，JavaScript 将数据 URL 设置为图片预览的 src 属性，以显示该图片。
复制链接

扫一扫