php - 通过单击现有图像上传图像

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 不允许皮肤文件输入，因此您不能使用图像作为输入。

但是有一些解决方法。我知道的2种方法：

第一个，您输入一个隐藏文件，并在单击图像时触发它。

<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 上存在一些问题，如果使用第二种方法，则不能为头像使用鼠标悬停事件。