上传图片通过点击现有的图片

Upload Image By clicking exisiting image

本文关键字：      更新时间：2023-09-26

我有一个简单的个人资料页面，其中有图像和一些信息。此配置文件页填满了注册时提供的信息。

我想要的是允许注册用户在他们的个人资料页面上点击他们的上传图像，并能够替换为一个新的。

我知道如何从数据库端处理这个问题。

我需要html或前端方面的帮助。从某种意义上说，我如何使图像可点击以打开上传图像窗口

我认为最简单的解决方案是将实际的文件上传元素放在页面的偏移量中，然后当用户单击配置文件图像时"转发触发"点击。

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/

你已经试过了吗?一个可能的解决方案是:

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>

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

相关文章：
  • 没有找到相关文章