So, I want to be able to edit the profile picture on the profiles for my website, and specifically I want the person to see the profile picture they uploaded on the page so they can see how it looks. I've already created a function that technically does this but it has an issue where it won't show the image due to it being a local file on the client side.

This is my js:

function change_img_src(img_e, input_e) {
    document.getElementById(img_e).src=input_e.value;
}

Then this is my html:

<input type="file" name="" value="Change profile picture" id="pfp_upload" onchange="change_img_src('pfp', this);">

This doesn't really show much since it does technically work but it's worth showing.

As you can see, when the file is in the input and is grabbed by the function, it does try to apply it, but the path it's given is a fakepath since it's local, giving this path c:\fakepath\pfp_7.jpg.

So I want to know how I can get it to show the image in the picture area without having to upload it, I know it's possible because a lot of websites do the same thing but I have no clue how to.