html - 在输入选择文件上显示图像

Question

我已经完成了更改个人资料图片的输入，但我希望当我选择一个新文件时，我的输入会自动更改为新图片。

<div class="form-group" align="center">
  <div style="position:relative; bottom:-90px; opacity:0.5; z-index:1; color:black;background:white;font-weight:bold">alterar</div>
  <label style="display: block" for="avatar">
    <img src="{{  $user->avatar }}" style="-moz-border-radius: 50px;border-radius: 50px;height: 80px" id="imgupload">
  </label>
  <div class="col-md-6">
    <input type="file" class="form-control" name="avatar" id="avatar" style="display: none">
  </div>
</div>

我不确定如何才能做到这一点。

编辑

我完成了添加 JS，但是当我选择一个新图像时，它正在改变圆 Angular 边框..

JS:

    function readFile() {
      if (this.files && this.files[0]) {
        var FR= new FileReader();
        FR.onload = function(e) {
          document.getElementById("imgupload").src = e.target.result;
        };
        FR.readAsDataURL( this.files[0] );
      }
    }

    document.getElementById("avatar").addEventListener("change", readFile, false);

https://jsfiddle.net/gst96zax/

Answer 1

我添加了以下JS

    function readFile() {
      if (this.files && this.files[0]) {
        var FR= new FileReader();
        FR.onload = function(e) {
          document.getElementById("imgupload").src = e.target.result;
          document.getElementById("imgupload").style.width = "80px";

        };
        FR.readAsDataURL( this.files[0] );
      }
    }

    document.getElementById("avatar").addEventListener("change", readFile, false);

https://jsfiddle.net/gst96zax/1