Saving and displaying uploaded image

Question

I have an already existing picture and I want to upload a new one and replace the old picture, but this code is not working. (I have a button whose onclick attribute is photoSave().) Can someone tell what's wrong with this Javascript code and maybe write a possible solution?

This is the important part of the code:

<div class="row">
      <div class="col-md-12">
        <div class="profilePic" id="profilePic">
          <img src="prof.jpg" id="pictureToShow" />
        </div>
      </div>
    </div>

    <br>

    <div class="row">
      <div class="col-md-12">
        <div id="photoButton">
          <label class="btn btn-default btn-file" style="width:220px" onclick="photoChange()">
            Profilkép megváltoztatása <input type="file" accept="image/*" style="display: none" id="newPhoto">
          </label>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      function photoChange() {
        document.getElementById("photoButton").innerHTML = '<button type="button" style="width:110px" class="btn btn-success btn-s" onclick="photoSave()">Mentés</button><button type="button" style="width:110px" class="btn btn-danger btn-s" onclick="photoSave()">Mégse</button>'
      }

      function photoSave() {
        document.getElementById("photoButton").innerHTML = '<label class="btn btn-default btn-file" style="width:220px" onclick="photoChange()">Profilkép megváltoztatása<input type="file" accept="image/*" style="display: none"></label>'

        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#pictureToShow').attr('src', e.target.result);
          }

          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>

A file input has no `src`, you have to use FileReader in order to view an selected image: http://stackoverflow.com/questions/19005678/how-to-upload-an-image-with-jquery-client-side-and-add-it-to-a-div — yuriy636, Aug 17 '16 at 11:10
The onclick attribute of your button is photoChange() not photoSave(). — maxeh, Aug 17 '16 at 11:13
You can try this method http://stackoverflow.com/questions/4094012/how-to-upload-preview-image-before-upload-through-javascript http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url — Varun Sreedharan, Aug 17 '16 at 11:13

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

When you're uploading a file via input type="file", the file is not yet saved in your server.

Two solutions:

So you need to put this file in your resources repo on your web server.
Or you can preview the image, see Preview an image before it is uploaded

Add the following js in your function:

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#pictureToShow').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }

Moreover, your image does not have an ID attribute, so you need to change <img src="prof.jpg" /> for <img src="prof.jpg" id="pictureToShow" />.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 17 '16 at 11:09

Nico

61
1
7

Sorry, I'm a beginner, I don't really understand what you mean. Can you add an example code please? But I don't have a web server yet, the code is just on my computer. – user6725906 Aug 17 '16 at 11:14
See the link that I passed above. I'm adding the exemple in my response. – Nico Aug 17 '16 at 11:17
Let us know when your code is working (and accept the response if it okay for you). – Nico Aug 17 '16 at 11:29
I use Bootstrap, maybe that's why you don't understand. – user6725906 Aug 17 '16 at 12:21
Does not working with modification of input & selector ? – Nico Aug 17 '16 at 13:33
Have you try this ? Put `` out of `div photoButton`. As you're not fetching jquery (I think), change the `$('#pictureToShow').attr('src', e.target.result);` to `document.getElementById('pictureToShow').setAttribut‌e('src', e.target.result);` – Nico Aug 18 '16 at 11:37

Saving and displaying uploaded image

1 Answers1