wxpay

最新推荐文章于 2023-06-06 10:12:09 发布

爱好女的故事

最新推荐文章于 2023-06-06 10:12:09 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/joker6295/article/details/86495824

版权

图片上传预览


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">
<script>
  var fileInput = document.querySelector('input[type=file]'),
          previewImg = document.querySelector('img');
  fileInput.addEventListener('change', function () {
      var file = this.files[0];
      var reader = new FileReader();
      // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
      reader.addEventListener("load", function () {
          previewImg.src = reader.result;
      }, false);
      // 调用reader.readAsDataURL()方法，把图片转成base64
      reader.readAsDataURL(file);
  }, false);
</script>
</body>
</html>