Overwrite an image file using Javascript

Question

Is there a way to overwrite an image already existing in my site using javascript... if yes, what method, and any links for tutorials?

Do you want to change src of an image? if yes than ```document.getElementById('myImageId').src = 'new-image.png'``` — Sergiy Kozachenko, Sep 22 '15 at 12:28
@Grievoushead there is no suggestion of using jQuery. Good call on posting as a comment because FYI if you post jQuery answers to Javascript questions you often get downvoted. — Popnoodles, Sep 22 '15 at 12:28
Andrew can you clarify whether you want to do this on the web page or the server? — Popnoodles, Sep 22 '15 at 12:29

score 1 · Answer 1 · answered Sep 22 '15 at 12:27

This is a code example in Js :

<script language="javascript">
function ChangeImageSrc(oldSrc, newSrc) {
    var imgElements = document.getElementsByTagName('img');
    for (i = 0; i < imgElements.length; i++){
        if (imgElements[i].src == oldSrc){
            imgElements[i].src = newSrc;
            break;
        }
    }
}
</script>

score 1 · Accepted Answer · answered Sep 22 '15 at 12:31

You only need to change the src attribute of your image, you can do something like this:

<script>
function myFunction() {
    var x = document.getElementById("myImg").src = 'image2.jpg';
}
</script>

<img src="image1.jpg" id="myImg">
<button onclick="myFunction()">Change Image </button>

score 0 · Answer 3 · answered Sep 22 '15 at 12:26

You can't do this with javascript alone - you will need to have something on your server to actually handle the saving of the image. If you want to overwrite an image, you would simply need to provide the same filename when saving and apply the appropriate permissions.

There are lots of resources available for file/image uploads, eg:

https://joelvardy.com/writing/javascript-image-upload
https://css-tricks.com/ajax-image-uploading/

The right solution for you depends on what you have available on your server.

You can overwrite if the filename is the same without `unlink()`? — Popnoodles, Sep 22 '15 at 12:27

Overwrite an image file using Javascript

3 Answers3