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

分享 / 4 / 4 / 创建于 6年前

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

课程读者 89 声望

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

《L01 基础入门》

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

《G01 Go 实战入门》

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

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

6年前评论

lianglunzhong

课程读者 267 声望

找 js 的插件来实现。

6年前评论

bing_

课程读者 89 声望

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

file

file

6年前评论

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>

6年前评论

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

帮助