How update a src of Image

Question

In my profile I insert a button to load a picture from pc, but I don't know how upgrade the default user's image with the new image selected by user. Then I would like change the text of button from carica to elima when in the src there is an image loaded by user.

function changeImage(){

    var elem = document.getElementById("change_image_button");

    //Se devo caricare l'immagine
    if(elem.value=="Carica"){
        var input = document.createElement('input');
        input.type = 'file';
        input.onchange = e => { 
            var file = e.target.files[0]; 
            var reader = new FileReader();
            reader.readAsDataURL(file,'UTF-8');
            reader.onload = readerEvent => {
                var content = readerEvent.target.result; //File da caricare
                document.getElementById("profilePicture").src= content.src;
            }
        }
        input.click();
        elem.value = "Elimina";
    }

while the html code is:

<!--<Profile picture>-->
                        <img id="profilePicture" src="images/profilo.png" style="height: 173px;width: 160px;margin-left: 20%;margin-top: 20px;">
        <div id="infoLoginUtente">
            <p><span>Cambia Immagine: </span>
            <span> 
               <button onClick="changeImage();" id="change_image_button" value="Carica"> Carica</button> 
               <input id="file-input" type="file" name="name" style="display: none;" />
            </span></p>
        </div>

Cambia Immagine: Carica

but when i try to put the image the result is:

Does this answer your question? [How to make a simple image upload using Javascript/HTML](https://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html) — Heretic Monkey, May 18 '20 at 14:31
maybe but i don't understand very well the code in that question — Alessia, May 18 '20 at 14:33
Well, one curious thing is that you're using `readAsText` on a file which is presumably an image file. Image files are generally not text files (except for SVG, but even those you can handle as binary for images). — Heretic Monkey, May 18 '20 at 14:37
Sure, sounds like [this answer](https://stackoverflow.com/a/61672489/215552) from the question I pointed to :). — Heretic Monkey, May 18 '20 at 14:50

score 0 · Answer 1 · answered May 18 '20 at 14:45

0

Modify your input.onchange like this:

input.onchange = e => { 
  var file = e.target.files[0];             
  document.getElementById("profilePicture").src= URL.createObjectURL(file);
}

answered May 18 '20 at 14:45

gulima

139
2
11

How update a src of Image

1 Answers1