图片上传 一张展示，base64图片获取

时间：2023-02-14 05:04:22
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>upload by form</title>

  </head>

  <body>

    <input type="file" name="avatar" id="avatar" multiple="multiple" />

    <img id="img" />

  </body>

  <script>

    window.onload = () => {

      const avatar = document.getElementById("avatar");

      const img = document.getElementById("img");

      avatar.onchange = e => {

        const file = e.target.files[0];

        //创建读取文件的对象

        const reader = new FileReader();

        //使用该对象读取file文件

        reader.readAsDataURL(file);

        //读取文件成功后执行的方法函数

        reader.onload = function(e) {

          //读取成功后返回的一个参数e，整个的一个进度事件

          //选择所要显示图片的img，要赋值给img的src就是e中target下result里面

          //的base64编码格式的地址

          img.src = e.target.result;

        };

      };

    };

  </script>

</html>

相关文章