javascript 单击现有图像上传图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14414924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upload Image By clicking exisiting image
提问by Hammad Anwer
I have a simple profile page which has image and some information. This profile page is filled up with the information provided during registration.
我有一个简单的个人资料页面，其中包含图像和一些信息。此个人资料页面填写了注册期间提供的信息。
What i want is to allow registered users to click on their upload image on their profile page and be able to replace with a new one.
我想要的是允许注册用户在他们的个人资料页面上点击他们上传的图片，并能够用新的图片替换。
I know how to handle this from the database side.
我知道如何从数据库端处理这个问题。
I need help on the html or the front end side. In the sense that how do i make image clickable to open the upload image window.
我需要 html 或前端方面的帮助。从某种意义上说，我如何使图像可点击以打开上传图像窗口。
回答by lulezi
I think the simplest solution to this, is to place the actual file upload element in the offset of the page and then "forward trigger" the click to it when the user clicks on the profile image.
我认为最简单的解决方案是将实际的文件上传元素放在页面的偏移量中，然后在用户单击个人资料图片时“向前触发”点击它。
HTML:
HTML：
<input id="profile-image-upload" class="hidden" type="file">
<div id="profile-image">click here to change profile image</div>
JS:
JS：
$('#profile-image').on('click', function() {
$('#profile-image-upload').click();
});
See my Fiddle: http://jsfiddle.net/L8xCb/3/
看我的小提琴：http: //jsfiddle.net/L8xCb/3/
回答by hohner
What have you already tried? One possible solution might be something like:
你已经尝试过什么？一种可能的解决方案可能是这样的：
jQuery:
jQuery：
$('.current_image').click(function() {
$('.new_image_box').toggle();
});
HTML:
HTML：
<img src="/path/to/avatar.png" class="current_image" />
<div class="new_image_box">
<input type="file" name="new_avatar"/>
</div>
If you want to avoid JavaScript and use HTML, so that users who click their existing pages get redirected away to a new page, use:
如果您想避免使用 JavaScript 并使用 HTML，以便单击现有页面的用户被重定向到新页面，请使用：
<a href="/upload-form">
<img src="/path/to/avatar.png" />
</a>
回答by marvin
html does not allow to skin file input, so you can not use an image as an input.
html 不允许皮肤文件输入，因此您不能使用图像作为输入。
But there are some work arounds. 2 ways I know:
但是有一些变通方法。我知道的2种方式：
First one, you put a hidden file input, and trigger it when the image is clicked.
第一个，你放置一个隐藏文件输入，并在点击图像时触发它。
<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>
Second method is, you put your input in front of your image, and set its opacity to 0,
第二种方法是，将输入放在图像前面，并将其不透明度设置为 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>
Note: There are some down sides though, first method have some issues with Internet Explorer, and if you use the second method, you cannot use mouseover events for the avatar.
注意：虽然有一些缺点，第一种方法对 Internet Explorer 有一些问题，如果使用第二种方法，则不能为头像使用鼠标悬停事件。
