上传并保存图像 onclick of image

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>

告诉我进展如何。

//更新的答案

如果你想让它工作，你必须使用 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>