通过单击图标上传图像答案

【问题标题】：Upload image by clicking on a icon通过单击图标上传图像
【发布时间】：2021-10-03 19:52:52
【问题描述】：

我想创建一个功能，我可以通过单击相机图标上传照片。基本上，我想做与单击按钮选择要上传的文件时相同的操作，但目前我还没有找到方法。

我用来放置东西的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>

html相关的CSS

.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);
}

【问题讨论】：

标签： html css frontend styles

【解决方案1】：

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

 .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>

【讨论】：

【解决方案2】：

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

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);
}

【讨论】：