I work in javascript basically I want to show the image when the user pick the image from the device the image must change the code that I use in the javascript file is
function changeProfile(){
var location = document.getElementById("profileLocation");
alert(location.value);
var image = document.getElementById("profileAAImage");
image.src(location.value);
}
and the code that I wrote in html file is
<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100" >
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onclick="changeProfile()" onkeyup="changeProfile()" placeholder="select profile image"
required>
</div>
</div>
what I do to do the required task.
Change location.value to location.files[0] to get the selected file.
function changeProfile() {
var location = document.getElementById("profileLocation");
var image = document.getElementById("profileImage");
image.src = window.URL.createObjectURL(location.files[0]);
}<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100">
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onchange="changeProfile()" placeholder="select profile image" required>
</div>
</div>