点击图标上传图片

Question

我想创建一个功能，我可以通过单击相机图标上传照片。基本上我想做的事情和你点击按钮选择你想上传的文件一样，但我现在找不到办法做到这一点。

我用来放东西的html

<div class="user-sidebar ">
    <div class="profile-pic">
      <img src="/img/pic.png" alt="" class="pic">
      <form action="">
        <input type="file" name="pic" accept="image/*">
        <i class="fas fa-camera fa-2x"></i>
      </form>
    </div>
  </div>

CSS相关html

.user-sidebar {
  width: 30vw;
  height: 100vh;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  background-color: var(--white2);
}

.profile-pic {
  margin: 100px auto 0px auto;
  height: 170px;
  width: 170px;
  border-radius: 50%;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  overflow-y: hidden;
}

.profile-pic i {
  position: absolute;
  top: 230px;
  left: 270px;
  cursor: pointer;

  color: var(--white);
}

Answer 1

这是解决方案，请根据需要更改类名称和图片路径

Html

<div>Click the upload icon below to upload a file.</div>
   <div class="image-upload">
    <label for="file-input">
        <img src="icons/mixed-12/130/188-512.png"/>
    </label>

    <input id="file-input" type="file"/>
</div>

Css

    .image-upload {
    height: 170px;
    width: 170px;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
    margin: 100px auto 0px auto;
    overflow-y: hidden;
}
.image-upload > input
{
    display: none;
}

.image-upload img
{    width: 80px;
    cursor: pointer;
    position: absolute;
    top: 212px;
    left: 630px;
    color: var(--white);
}

Answer 2

我已经添加了您的解决方案点击图标上传图片。

 .image-upload {
    height: 170px;
    width: 170px;
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
    margin: 100px auto 0px auto;
    overflow-y: hidden;
}
.image-upload > input
{
    display: none;
}

.image-upload img
{    width: 80px;
    cursor: pointer;
    position: absolute;
    top: 212px;
    left: 330px;
    color: var(--white);
}

<div>Click the upload icon below to upload a file.</div>
   <div class="image-upload">
    <label for="file-input">
        <img src="https://image.flaticon.com/icons/png/512/70/70310.png"/>
    </label>

    <input id="file-input" type="file"/>
</div>

点击图标上传图片

Upload image by clicking on a icon

html

css

frontend

styles