Question

我试图让我的图片点击以打开文件上传器，但没有任何工作。

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，但我一直在收到错误。请帮忙。

Answer 1

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

这是一个例子。

＆＃13;

var imgBtn = document.querySelector('img');
var fileInp = document.querySelector('[type="file"]');

imgBtn.addEventListener('click', function() {
  fileInp.click();
})

＆＃13;

input[type="file"] {
  display: none;
}

img {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

点击图片并打开文件上传

1 个答案: