点击图片上传图片

Posted 2023-03-13

【中文标题】点击图片上传图片

【英文标题】：Click on image to upload image

【发布时间】：2018-03-22 20:53:17

【问题描述】：

我在 jQuery 中有这段代码：

$("#profileImage").click(function(e) 
    $("#imageUpload").click();
);

这是 html：

<image id="profileImage" src="http://lorempixel.com/100/100" />
<input id="imageUpload" type="file"  name="profile_photo" placeholder="Photo" required="" capture>

如何在 Angular 4 中复制它？

编辑： 从第一条评论我看到我的问题不清楚。

我想创建一个“编辑个人资料图片，如果点击图片”。 这将打开“选择文件弹出窗口”

这是使用 jQuery Add a Profile Picture in form in HTML and CSS 制作的示例

我想在 Angular 4 中做到这一点

谢谢你

【问题讨论】：

你可以使用ViewChild在你的Angular组件中获取一个html元素，here is some implementation example from SO

【参考方案1】：

所以我有答案了，可以使用纯 javascript

var input = document.getElementById('inputPhoto');
input.addEventListener('click', function (e) 
    // no need for extra code here
    console.log('click triggered');
);

input.click(); // opening dialog

ps：社区如果您不知道答案，则无需投票。直接无视（好了。有一天有人会遇到同样的问题，这会派上用场。