gpt4 book ai didi

javascript - 点击图片打开文件上传

转载 作者:行者123 更新时间:2023-11-30 15:36:03 25 4
gpt4 key购买 nike

我试图让我的图片点击打开文件 uploader ,但没有任何效果。

html:

    <a href="#">
<figure class="profile-picture" id="profile-picture">
</figure>
</a>

CSS:

figure.profile-picture {
background-position: center center;
background-image: url(/img/QNdefualt.jpg);
background-size: cover;
border: 5px #efefef solid;
border-radius: 50%;
bottom: -50px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px gba(0,0,0,0.3);
height: 148px;
left: 150px;
position: absolute;
width: 148px;
z-index: 3;
}
.profile-picture:hover {
background-image: url(/img/defualt-hover.png);
background-size: cover;
}

我试过 onclicks,但我总是收到错误。请帮忙。

最佳答案

您将需要使用 type=file 添加一个 input 元素。它不必是可见的。监听图像上的 click 事件,并在隐藏的 input 元素上触发 .click()

这是一个例子。

var imgBtn = document.querySelector('img');
var fileInp = document.querySelector('[type="file"]');

imgBtn.addEventListener('click', function() {
fileInp.click();
})
input[type="file"] {
display: none;
}

img {
cursor: pointer;
}
<input type="file" />
<img src="http://placehold.it/200x200/2980b9/FFF?text=Click Me" alt="">

关于javascript - 点击图片打开文件上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41528934/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com