如何实现点击头像弹出选择图片窗口?
如何实现点击头像弹出选择图片窗口?
回答:
文件上传,找一下相关的UI库。
这个把文案去掉就能达到你要的效果吧。
回答:
input定位在img上面,input完全透明
回答:
测试使用:https://codepen.io/pantao/pen...
假设 HTML 结构如下:
<div class="avatar"> <img src="https://avatars.githubusercontent.com/u/463704?v=4" alt="如何实现点击头像弹出选择图片窗口?" id="avatar-image" />
</div>
CSS 样式:
.avatar { width: 80px;
height: 80px;
border-radius: 3px;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
cursor: pointer;
}
那么,可以通过下面这段代码实现上面的需求:
const pickImage = () => { // 我这里是返回了一个 Promise,也可以不使用 Promise,回调也可以
return new Promise((resolve, reject) => {
// 创建一个 input 元素
const input = document.createElement('input');
// 类型为 file,这样,当它点击的时候,就会打开文件选择框
input.setAttribute('type', 'file');
// 只接受图片文件,除了该限制,还可以加上数量限制等
input.setAttribute('accept', 'image/*');
// 监听 input 的 change 事件,将其 target.files 返回
input.addEventListener('change', e => {
console.log(e);
resolve(e.target.files);
});
// 创建一个 MouseEvents
const event = document.createEvent('MouseEvents');
// 初始化事件为 `click` 事件
event.initMouseEvent("click")
// 在 input 上面触发该事件
input.dispatchEvent(event);
})
}
// 给 #avatar-image 添加 click 事件监听,点击之后,调用 pickImage() 方法取得文件
document.getElementById('avatar-image').addEventListener('click', async () => {
const result = await pickImage();
console.log(result[0].name);
})
如果是 Vue 项目的话,只需要将 pickImage
方法写进 methods
中,然后通过 <img @click="pickImage" />
即可调用,并且还不需要返回 Promise
,直接在 pickImage
里面延揽 e.target.files
即可。
以上是 如何实现点击头像弹出选择图片窗口? 的全部内容, 来源链接: utcz.com/p/936214.html