HTML5 用FileReader对象读取图片

Hillbox

已于 2022-08-14 23:05:52 修改

阅读量797

点赞数 1

分类专栏： html5 文章标签： html5 前端 html

于 2022-08-14 22:50:21 首次发布

本文链接：https://blog.csdn.net/qq_33514421/article/details/126337468

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

FileReader.readAsDataURL(File对象)方法，可将File转位base64格式。img元素的src属性、其他元素的background属性都能被赋值为base64格式，这样可以不经过后台而直接将本地图片显示在页面中，减少前后端的频繁交互，减少服务器端的压力。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script>
    window.onload = function () {
      var oFile = document.getElementById("file");
      oFile.onchange = function(){
        //获取第1个文件
        var file = oFile.files[0];
        //将图片转换为Base64格式
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
          //添加图片到页面中
          var oImg = document.createElement("img");
          oImg.src = this.result;
          document.body.appendChild(oImg);
        };
      };
    }
  </script>
</head>
<body>
  <input id="file" type="file" /><br/>
</body>
</html>