Upload image change with img src tag in html, javascript

How to change the src attribute of an img element in JavaScript / jQuery,  This example changes the src attribute of image by using JavaScript.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all" rel="stylesheet">

<style>
#uploadfile {
  display: none;
}

.profile-img-container {
    position: absolute;
    width:50%;
}

.profile-img-container img:hover {
    opacity: 0.1;
    z-index: 501;
}

.profile-img-container img:hover + i {
    display: block;
    z-index: 500;
}

.profile-img-container i {
    display: none;
    position: absolute;
    margin-left: 5%;
    margin-top: 5%;
}

.profile-img-container img {
    position:absolute;
}
#viewport{
    width: 180px;
height: 180px;
}
</style>
 <div class="progress with-img profile-img-container">
    <img id="viewport" src="https://i.stack.imgur.com/Xini7.png?s=48&g=1" />

    <i class="fa fa-upload fa-5x" style="font-size: 8em;"></i>
 </div>
 <input id='uploadfile' name="photo" type ='file'>


 <script src="http://127.0.0.1:8000/associate/js/template9/jquery-1.9.1.min.js" ></script>
<script>
 $('.profile-img-container img').click(function(){
 $('#uploadfile').click();
});

var m, f, v;

f = document.getElementById("uploadfile");
v = document.getElementById("viewport");

f.addEventListener("change", function(e){
 m = new FileReader();
 m.onload = function(e){
  v.src = e.target.result;
 };
 m.readAsDataURL(this.files[0]);
});

</script>