我在創建帶有用戶可更改個人資料圖片的 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>uj5u.com熱心網友回復：
現在你改變img標簽'id'。并添加一個引數。
**HTML**
<div >
<img src="img/ananthu-1.jpg" id="output1" style="width:120px; height:120px;">
<label for="file" >
<span>Change Photo</span>
</label>
<input type="file" accept="image/*" id="file" onchange="loadFile(event,1)">
</div>
<hr>
<div >
<img src="img/ananthu-1.jpg" id="output2" style="width:120px; height:120px;">
<label for="file" >
<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]);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487922.html
標籤：javascript 事件 改变 轮廓
上一篇：執行函式，其內容為div的文本