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

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

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

课程读者 89 声望

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

《L05 电商实战》

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

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

推荐文章：

更多推荐...

Laravel 实用小技巧——缓存标签的小秘密（下） 12 / 11 |

Laravel 实用小技巧——缓存标签的小秘密（上） 16 / 6 |

让DcatAdmin再放光芒系列 [plus版发布]-plus内测版正式上线 13 / 33 |

让DcatAdmin再放光芒系列 [页面组件]:上百种页面组件随便加 28 / 20 |

如何让DcatAdmin再放光芒,惠及百万PHPer 18 / 39 |

Vim 实用小技巧系列——操作符 + 动作命令，让「操作」秀起来 15 / 5 |

讨论数量: 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年前评论

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

帮助