Показать изображение на входном файле выбора

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> 

Я не уверен, как это сделать.

EDIT

я достиг добавления JS, но когда я выбираю новый образ он меняется закругленная границей ..

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