上傳和保存圖像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>