点击图标上传图片

2024-05-17 • 问答

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

我用来放置东西的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.16) 0px 3px 6px,rgba(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.23) 0px 3px 6px;
  overflow-y: hidden;
}

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

  color: var(--white);
}

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

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

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

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

点击图标上传图片

jsz0728 回答：点击图标上传图片

大家都在问