3

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

Hoyo
  • 1,044
  • 3
  • 13
  • 23
  • you mean it cannot replace the previous image that has been uploaded? – Drixson Oseña Sep 20 '13 at 06:12
  • cannot understand your actual problem, where are you facing problem , `changing`, `selecting`, `uploading` ? – Lekhnath Sep 20 '13 at 06: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 Sep 20 '13 at 06: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 Sep 20 '13 at 06:15
  • 1
    perhaps this will help http://blueimp.github.io/jQuery-File-Upload/basic.html – bhb Sep 20 '13 at 06:18
  • You need server side scripting like `PHP` and do the `Ajax` Request. Look at here : http://css-tricks.com/ajax-image-uploading/ OR here http://www.w3schools.com/php/php_file_upload.asp for getting started with. – Lekhnath Sep 20 '13 at 06:18
  • @Hoyo see bhb link for plugin. It's good and easy to use – Drixson Oseña Sep 20 '13 at 06:23

3 Answers3

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!

Gurminder Singh
  • 1,755
  • 16
  • 19
  • Just tried it as it was pretty simple for me, however, when I uploaded the image then the old image disappeared, I believe that we're taking only the name of the image and not the image itself? – Hoyo Sep 20 '13 at 07:22
  • Just tried another thing, I copied the image to my directory first and then uploaded then it worked, so I need to upload the file first to my server in order to do that right? any simple way that can do it? SIMPLEST is recommended(PHP) or if it can be done via JS then superb! – Hoyo Sep 20 '13 at 07:23
  • yes, you will have to upload the image first. I answered this thinking that you want to replace the image on the client side itself and then go to server side for uploading the image. – Gurminder Singh Sep 20 '13 at 07:36
  • If we select the whole path of the client's image selection then it'll show up that link right, that way we won't need to upload the picture on the server first right? if so then do you have any idea on it? – Hoyo Sep 20 '13 at 07:44
  • well you can't get the full path in javascript because of security violations (see http://stackoverflow.com/questions/3489133/full-path-from-file-input-using-jquery and http://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav). I think you'll have to use AJAX. – Gurminder Singh Sep 20 '13 at 08:13
1

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.

tbraun89
  • 2,246
  • 3
  • 25
  • 44
  • I would do but I don't have that much reps, It needs minimum 15 rep to do it otherwise I'd do it and yes my question has been solved! Thanks everyone! – Hoyo Oct 09 '13 at 06:30
1

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 recommend the former since ajax is probably a little tricky for a complete 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.

DGS
  • 6,015
  • 1
  • 21
  • 37