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>

上传并保存图像点击图像

1 个答案: