上传图片时显示图片内容

最新推荐文章于 2023-06-18 22:02:23 发布

老李头的代码生活

最新推荐文章于 2023-06-18 22:02:23 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： css html5 html

本文链接：https://blog.csdn.net/laoli360/article/details/120312384

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用HTML、CSS和JavaScript实现文件上传功能，特别是当用户选择图片后，能在页面上实时预览图片。通过监听input元素的change事件，使用FileReader API读取文件并将其转换为base64编码，最后将图片插入到div容器中展示。

摘要由CSDN通过智能技术生成

先写结构和样式

css如下

      div {
        width: 200px;
        height: 200px;
        background-color: #8df;
      }

然后书写结构如下

  <input type="file" name="" id="" />
    <div></div>

然后js获取上传文件域和div位置

  //点击上传在div中显示图片
      let file = document.querySelector("input"); //获取input
      let div = document.querySelector("div");  //获取div
      file.addEventListener("change", function () {
        // this.files[0]; //伪数组格式 刚上传的图片
        //读取文件:
        //实例化操作
        let reader = new FileReader();
        //读取文件: base 64 编码格式
        reader.readAsDataURL(this.files[0]);
        // 等读取完成后 就会得到这个编码格式
        reader.addEventListener("load", function () {
          // this.result 结果
          //创建 img
          let img = document.createElement("img");
          div.appendChild(img);
          img.src = this.result;
        });
      });