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>

相关阅读:
【多线程案例】Java实现简单定时器（Timer）
2022世界机器人大会开幕，有屋智能主动终止IPO，《2022人工智能发展白皮书》发布，2022可穿戴设备出货量将达3.44亿台
微服务 - 概念 · 应用 · 通讯 · 授权 · 跨域 · 限流
【AI视野·今日NLP 自然语言处理论文速览第四十一期】Tue, 26 Sep 2023
卡西欧FX5800全线贯通万能正
chatgpt赋能python：Python隐藏CMD窗口
独享IP地址的层级划分和管理：打造稳定高效的网络架构
卷积神经网络（CNN）
入门力扣自学笔记137 C++ （题目编号793）（未理解）
Linux第4课 Linux的基本操作

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