Upload/Change image in Javascript/HTML

Question

Basically, I'd like a feature just like twitter has like when we upload a picture on twitter then it automatically runs a spinner and change the image there on the old avatar place.

I tried to do this but kind of failed, however I did the following:

<script language="javascript">
    function changeImage() {


        document.getElementById("newavatar").src = "http://dummyimage.com/136x136/000/fff";

}
</script>


<img class="already-avatar" id="newavatar" src="avatar_default.png" width="136px" height="136px"/>
<input class="upload-image" onclick="changeImage()" type="file" name="avatar" accept="image/jpeg, image/png">

I'm doing the above, it actually changes the image however the image is not the selected one, I know the image needs to be uploaded first so it can change it but having hard time doing this.

Please help me if someone can, I'm a beginner, any help will be appreciated.

Thanks

Answer 1

try this:

<script language="javascript">
function changeImage() {
    document.getElementById("newavatar").src = document.getElementById("input-file").value;
}
</script>


<img class="already-avatar" id="newavatar" src="avatar_default.png" width="136px"    height="136px"/>
<input id="input-file" class="upload-image" onchange="changeImage()" type="file"    name="avatar" accept="image/jpeg, image/png">

you will have to change the event listener from "onclick" to "onchange" and the script also. Hope it helps!

Answer 2

If I understand you right you first want to upload the image and then display it to the user without reloading the page.

Then you first have to upload it with PHP or an other language to your server using Ajax and then replace the image, therefore send the path of the image with the Ajax response and do the replace.

Here is an example how to do this.