upload and save image onclick of image

Question

i have an html page.Which is actually an profile viewing html page. Where there is an profile picture. I want to upload option on-click of profile image and save it in my system.For now i am running it on my system only.

<ul>
    <li class="name">
        <input type="file" id="my_file" style="display: none;" />
        <img src="../../static/img/profile-img.jpg" alt="Shri"> <a>{{ .userName }}</a>
    </li>
    <li class="logout"><a href="/logout">Logout</a></li>
    <li><a href="#">Contacts</a></li>
    <li class="last"><a href="#">Help</a></li>
</ul>

I should get image upload option if i click on this image(current image) and i want to save uploaded image. This i need in any case please help me to do this.

Answer 1

I think this is what you are looking for:

$("#fileupload").on("click",function(){
    $("#my_file").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><input type="file" id="my_file" style="display: none;" /></li>
    <li><img id="fileupload" name="filetoupload" src="../../static/img/profile-img.jpg" alt="Shri you can click"></li>
    <li><a>{{ .userName }}</a></li>
    <li class="logout"><a href="/logout">Logout</a></li>
    <li><a href="#">Contacts</a></li>
    <li class="last"><a href="#">Help</a></li>
 </ul>

Tell me how it goes.

//UPDATED ANSWER

If you want this to work you have to use Jquery and include it on tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also include the jquery function on the head tag:

$(document).ready(function(){
    $("#fileupload").on("click",function(){
       $("#my_file").click();
    });    
});

In your html code you have to write your code:

<ul>
<li><input type="file" id="my_file" style="display: none;" /></li>
<li><img id="fileupload" name="filetoupload" src="../../static/img/profile-img.jpg" alt="Shri you can click"></li>
<li><a>{{ .userName }}</a></li>
<li class="logout"><a href="/logout">Logout</a></li>
<li><a href="#">Contacts</a></li>
<li class="last"><a href="#">Help</a></li>