上傳圖片點擊下載圖片

Question

我有一個簡單的個人資料頁面，其中有圖片和一些信息。此個人資料頁面充滿註冊期間提供的信息。

我想要的是允許註冊用戶在他們的個人資料頁面上點擊他們的上傳圖片，並能夠替換爲新的圖片。

我知道如何處理這個從數據庫端。

我需要html或前端的幫助。從某種意義上說，我如何使圖像可點擊打開上傳圖像窗口。

Answer 1

我認爲最簡單的解決方法是將實際的文件上傳元素放置在頁面的偏移量中，然後在用戶點擊配置文件圖像時「向前觸發」點擊。

HTML：

<input id="profile-image-upload" class="hidden" type="file"> 
<div id="profile-image">click here to change profile image</div> 

JS：

$('#profile-image').on('click', function() { 
    $('#profile-image-upload').click(); 
}); 

見我的小提琴：http://jsfiddle.net/L8xCb/3/

Answer 2

你已經試過了什麼？一個可能的解決方案可能是這樣的：

的jQuery：

$('.current_image').click(function() { 
    $('.new_image_box').toggle(); 
}); 

HTML：

<img src="/path/to/avatar.png" class="current_image" /> 

<div class="new_image_box"> 
    <input type="file" name="new_avatar"/> 
</div> 

---

如果你想避免的JavaScript和使用HTML，使用戶誰點擊他們現有的頁面被重定向到一個新的頁面，使用：

<a href="/upload-form"> 
    <img src="/path/to/avatar.png" /> 
</a> 

Answer 3

HTML不允許皮膚文件輸入，所以不能使用圖像作爲輸入。

但是有一些解決辦法。我知道的兩種方式：

第一個，你把一個隱藏的文件輸入，並點擊圖像時觸發它。

<img src="avatar.jpg" width="50" height="50" alt="" class="myAvatar" /> 
<input type="file" name="newAvatar" id="newAvatar" style="display:none;" /> 
<script> 
$(".myAvatar").click(function() { 
    $("#newAvatar").trigger("click"); 
}); 
</script> 

第二種方法是，你把你輸入你的面前的形象，和其不透明度設置爲0，

<div style="position: relative;"> 
    <img src="avatar.jpg" width="50" height="50" alt="" class="myAvatar" style="position:absolute; top:0; left:0; z-index:1;" /> 
    <input type="file" name="newAvatar" id="newAvatar" style="width:50px; height:50px; position:absolute; top:0px; left:0; z-index:2; opacity:0;" /> 
</div> 

注：有一些下來雙方雖然，第一種方法有一些問題， Internet Explorer，並且如果您使用第二種方法，則不能對頭像使用鼠標懸停事件。