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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.