我试图让我的图片点击打开文件 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/