达拉~ 2022-07-20 17:59 采纳率: 64.7%
浏览 224
已结题

img标签的src属性使用base64上传图片后刷新网页src显示问题

背景:使用input的file指定上传图片,然后把他作为 img 的 src 属性,显示没有问题,但是如果刷新网页的话就img的src属性就会显示未知
百度后得知可能是浏览器不会缓存的缘故,那换成背景图可以吗?他这里的这个未知是什么意思呢?


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" id="up" accept="image/*">
    <!-- <input type="file" name="pic" id="up" accept="image/*"> -->
    <img src="" width="200px" id="img" height="200px" alt="">
</body>
<script src="./source//jQuery/jquery.3.5.1.min.js"></script>
<script>
    let up = document.querySelector('#up')
    let img = document.querySelector('#img')
    up.onchange = function () {
        let fileDate = this.files[0]
        let pettern = /^image/
        if (!pettern.test(fileDate.type)) {
            alert('图片格式不正确')
            return
        }
        let reader = new FileReader()
        reader.readAsDataURL(fileDate)//及将图片转化为 base64位
        reader.onload = function (e) {
            console.log(e)
            console.log(this.result)//需要的数据
            // jq设置 src属性
            $('#img').attr('src', this.result)
        }
    }
</script>

</html>

  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-07-20 20:56
    关注

    使用localStorage本地存储可以实现

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
    
      <body>
        <input type="file" id="up" accept="image/*" />
        <!-- <input type="file" name="pic" id="up" accept="image/*"> -->
        <img src="" width="200px" id="img" height="200px" alt="" />
      </body>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script>
        window.onload = function () {
          // 刷新进入,查询localStorage中存在key为imgSrcBase64Temp
          const imgSrcBase64Temp = window.localStorage.getItem("imgSrcBase64Temp");
          // 将imgSrcBase64Temp赋值给img的src,实现保存上次上传的图片
          if (imgSrcBase64Temp) $("#img").attr("src", imgSrcBase64Temp);
        };
        let up = document.querySelector("#up");
        let img = document.querySelector("#img");
        up.onchange = function () {
          let fileDate = this.files[0];
          let pettern = /^image/;
          if (!pettern.test(fileDate.type)) {
            alert("图片格式不正确");
            return;
          }
          let reader = new FileReader();
          reader.readAsDataURL(fileDate); //及将图片转化为 base64位
          reader.onload = function (e) {
            console.log(e);
            console.log(this.result); //需要的数据
            window.localStorage.setItem("imgSrcBase64Temp", this.result); // 存在localStorage中key为imgSrcBase64Temp
            // jq设置 src属性
            $("#img").attr("src", this.result);
          };
        };
      </script>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月29日
  • 已采纳回答 7月21日
  • 修改了问题 7月20日
  • 创建了问题 7月20日

悬赏问题

  • ¥15 Simulink 仿真如何使用MATLAB function模块获取到仿真过程中某一仿真时刻输入到模块的函数的值?
  • ¥15 heidisql学习 sql
  • ¥50 关于#微信小程序#的问题:微信小程序支持h5实现webrtc h264 h265低延迟传输渲染,能付费帮我们解决一下吗
  • ¥20 请问ansys License manager 这个问题如何解决
  • ¥15 memory.limit()' is no longer supported
  • ¥15 基于stm32f4产生两路pwm信号并可由串口通信调节
  • ¥15 C++/QT设置函数调用条件(多个功能调用同一,且各自调用条件不同)
  • ¥15 UE5样条线生成的网格UV问题
  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来