上传和保存图像onclick图像

Question

我有一个html页面。其实是一个配置文件查看html页面。哪里有个人资料照片。我想上传配置文件图像的选项，并将其保存在我的系统中。现在我只在我的系统上运行它。

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

我应该得到图像上传选项，如果我点击这个图像（当前图像），我想保存上传的图像。 这个我需要在任何情况下请帮助我做到这一点。

Answer 1

我认为这是你在找什么：

$("#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>

告诉我是怎么回事。

//修订ANSWER

如果你想要这个工作，你必须使用jQuery和包括它的标签。

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

还包括head标签jquery的功能：

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

在你的HTML代码，你必须写代码：

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