如何制作多个用户编辑资料

Question

我在创建带有用户变化的个人资料图片的HTML网站方面遇到了麻烦。例如，能够在员工配置文件上上传和更改您的个人资料图片。我已经尝试了许多方法，所以我真的不能放下任何代码进行修订，但这是我认为应该有效的方法：

var loadFile = function(event) {
  var image = document.getElementById("output");
  image.src = URL.createObjectURL(event.target.files[0]);
}

.profile-pic {
  color: transparent;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.profile-pic input {
  display: none;
}

.profile-pic img {
  position: relative;
  object-fit: cover;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12) !important;
  z-index: 0;
}

.profile-pic .-label {
  cursor: pointer;
  position: absolute;
  bottom: 0;
}

.profile-pic:hover span {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fafafa;
  transition: background-color 0.2s ease-in-out;
  display: inline-block;
  padding: 0.2em;
  height: 2em;
  text-align: center;
}

<div class="profile-pic">
  <img src="img/ananthu-1.jpg" id="output" style="width:120px; height:120px;">
  <label for="file" class="-label">
                <span>Change Photo</span>
            </label>
  <input type="file" accept="image/*" id="file" onchange="loadFile(event)">
</div>
<hr>
<div class="profile-pic">
  <img src="img/ananthu-1.jpg" id="output" style="width:120px; height:120px;">
  <label for="file" class="-label">
                   <span>Change Photo</span>
                </label>
  <input type="file" accept="image/*" id="file" onchange="loadFile(event)">
</div>

Answer 1

现在，您更改IMG标签“ ID”。并添加一个参数。

**HTML**
<div class="profile-pic">
    <img src="img/ananthu-1.jpg" id="output1"  style="width:120px; height:120px;"> 
        <label for="file" class="-label">
            <span>Change Photo</span>
        </label>
        <input type="file" accept="image/*" id="file" onchange="loadFile(event,1)">
                                
 </div>
  <hr>
      <div class="profile-pic">
        <img src="img/ananthu-1.jpg" id="output2"  style="width:120px; height:120px;"> 
            <label for="file" class="-label">
               <span>Change Photo</span>
            </label>
            <input type="file" accept="image/*" id="file" onchange="loadFile(event,2)">
                                
      </div>

并更改输入文件 - 显示：块。

**CSS**
.profile-pic input {
  display: block;
}

**JS**
var loadFile = function(event,id) {
  var image = document.getElementById("output"+id);
  image.src = URL.createObjectURL(event.target.files[0]);
}