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

上传图像单击现有图像

3 个答案: