input标签上传图片文件，并在网页中显示图片

最新推荐文章于 2024-07-25 10:33:27 发布

touto_zc

最新推荐文章于 2024-07-25 10:33:27 发布

阅读量4.9k

点赞数 2

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/touto_zc/article/details/107448217

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过html5的input标签上传图片，并在网页中显示出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="" id="user-photo" />
    <div id="show-picture"></div>
    <script>
      var getUserPhoto = document.getElementById("user-photo");
      getUserPhoto.onchange = function () {
        var file = this.files;
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function () {
          var image = document.createElement("img");
          image.width = "400";
          image.src = reader.result;
          var showPicture = document.getElementById("show-picture");
          showPicture.append(image);
        };
      };
    </script>
  </body>
</html>