画像を入力選択ファイルに表示

入力を行ってプロファイル画像を変更しましたが、新しいファイルを選択すると入力が自動的に新しい画像に変更されます。画像を入力選択ファイルに表示

<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>

どのように達成できるかわかりません。私は次のように追加

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/

出典

2016-09-02 dante

ところでセンターは廃止され、使用 'スタイル= "テキスト整列：センター"' – mlegg

"{{する$ user->アバター}}" 義和報復はありますか？あなたは角度のJSまたは何かを使用していますか？ –

これは画像のURLです。 – dante