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>

相关阅读:
【技能树笔记】网络篇——练习题解析（三）
CentOS中yum install命令如何找到安装包的下载地址
【MySQL —— 事务】四大特性、隔离级别
React批处理原理及性能优化实践
CentOS8迁移tencentOS实践
技术分享|电商数据接口|淘宝天猫京东商品API接口之数据同步
Chromium Trace and Perfetto使用详解
我发现 Linux 文档写错了
聊聊领导力与带团队的那些事
【Maven】你好，Maven ＞＞＞与Maven的初次见面~

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