上传头像如何在点击保存之前让图片在页面上显示出来？

分享 / 3 / 4 / 创建于 5年前

我感觉这样体验更好一些。
不知如何实现。

课程读者 89 声望

感谢那些在编程路上帮助过我的人！

《L05 电商实战》

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

《L04 微信小程序从零到发布》

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

讨论数量: 4

bing_

课程读者 89 声望

我现在会了，分享给有需要的人。

js实现图片上传实时显示的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" style="display:none;" />
</body>
</html>
<script type="text/javascript">
    function showPreview(source) {
      var file = source.files[0];
      if(window.FileReader) {
          var fr = new FileReader();
          console.log(fr);
          var portrait = document.getElementById('portrait');
          fr.onloadend = function(e) {
            portrait.src = e.target.result;
          };
          fr.readAsDataURL(file);
          portrait.style.display = 'block';
      }
    }
</script>

5年前评论

lianglunzhong

课程读者 267 声望

找 js 的插件来实现。

5年前评论

bing_

课程读者 89 声望

你说到 JS ，我想请问，为什么我在 resources\js\app.js 文件了写了一小段 js ，能用，但在浏览器控制台一直报错。

file

file

5年前评论

Ailon

因为初始化的时候，还没有 id 为 close 这个元素

bing_

课程读者 89 声望

我现在会了，分享给有需要的人。

js实现图片上传实时显示的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" style="display:none;" />
</body>
</html>
<script type="text/javascript">
    function showPreview(source) {
      var file = source.files[0];
      if(window.FileReader) {
          var fr = new FileReader();
          console.log(fr);
          var portrait = document.getElementById('portrait');
          fr.onloadend = function(e) {
            portrait.src = e.target.result;
          };
          fr.readAsDataURL(file);
          portrait.style.display = 'block';
      }
    }
</script>

5年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助