HTML5 用FileReader对象读取图片

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


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>

相关阅读:
dockerfile文件详解(常用命令)
SpringBoot SpringBoot 运维实用篇 2 配置高级 2.3 配置文件4级分类
数字IC设计笔试常见大题整理（简答+手撕）
docker 复制容器
【QSPI】什么是QSPI SPI和QSPI异同
“文本界面”(Python插值字符串格式化打造)
1.6 分组延时，丢失和吞吐量
opengl函数加载和错误处理
Mysql 关于count()函数的记录
一次预制体丢失[XX prefab at index n is missing]的排查经历及【用代码查找场景中的预制体】

原文地址：https://blog.csdn.net/qq_33514421/article/details/126337468