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 = "";

}
</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

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./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

• javascript
• jquery
• ajax
• html

• you mean it cannot replace the previous image that has been uploaded? – Drixson Oseña Commented Sep 20, 2013 at 6:12
• cannot understand your actual problem, where are you facing problem , changing, selecting, uploading ? – Lekhnath Commented Sep 20, 2013 at 6:13
• @DrixsonOseña basically it changes the old image when the new image i pointed on javascript but that happens when I click on the Browse button, I'd like to have the image I uploaded to show up there so I think maybe uploading the image to our server is necessary or something similar to it? – Hoyo Commented Sep 20, 2013 at 6:14
• @Lekhnath on this code, I can change the image src of the link I gave in the JS function however I don't want that link there, I want to upload the image that was selected via input field, via the dialog box of browse. is it clear now? if not I'll try to be more clear – Hoyo Commented Sep 20, 2013 at 6:15
• 1 perhaps this will help blueimp.github.io/jQuery-File-Upload/basic.html – bhb Commented Sep 20, 2013 at 6:18

3 Answers 3

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!

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.

The First thing you will need to do is either put the file input into a form and post synchronously to the server or use ajax to upload the file asynchronously. I remend the former since ajax is probably a little tricky for a plete beginner.

The next step is handling the file once it has been submitted to the server. Depending on what language you are using to deal with server side requests the actual coding varies. But basically you want to arrange where your file is saved to when it is uploaded so that you know how to reference the file.

The last step is finding some way to tell the client where the new file is. You can utilize things like sessions and cookies for this or you can look into storing variables such as these in a database.