我想單擊現有圖像並顯示預覽來編輯圖像。 如何實現呢？

Question

IAM使用foreach循環顯示帶有圖像的行數，並且我想在單擊特定行的現有圖像時更改圖像。以下是IAM使用的代碼

<td onclick="HandleBrowseClick('input-image-hidden');"><?php
echo'<img id="image-preview" style="cursor:pointer; width: 50px; 
height:50px;" 
src="' . base_url().'./uploads/admin/'. $val->member_file . '">';
?>
<input required="" name="member_file" style="display:none" id="input-image- 
hidden" onchange="document.getElementById('image-preview').src = 
window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, 
image/png"></td>

和IAM用於預覽圖像的腳本如下

<script type="text/javascript">
function HandleBrowseClick(input_image)
{
var fileinput = document.getElementById(input_image);
fileinput.click();
}     
</script>

iam使用foreach顯示帶有圖像的行，如果我想更改第二行上的圖像，iam單擊第二行上的圖像，iam選擇一個圖像，但是新選擇的圖像在第一行上預覽，僅此是問題。 誰能告訴我解決該問題的解決方案，即iam更改第二行上的圖像，它應該在第二行上預覽

Answer 1

您正在使用的代碼將在id為image-preview的img標簽上輸出圖像。 HTML中的ID是唯一的，因此您只能有一個ID為image-preview元素。

看來您已經放置了多個具有相同ID的img標簽。 如果是這種情況， document.getElementByID("image-preview")將僅匹配ID為image-preview的第一個img標簽。 因此，您新上傳的圖片將始終附在第一行的img標簽上。

您可以在input的onchange屬性中使用previousSibling屬性來定位先前的標簽，即ID為image-preview img 。 然后，您可以更改其源屬性。

還要修復具有相同ID（使用類名）的多個元素。 他們可能會破壞您的JavaScript。

Answer 2

您的代碼沒有將圖像ID傳遞給函數HandleBrowseClick（）-它正在傳遞圖像對象本身-並且命令document.getElementById（input_image）需要圖像ID而不是圖像對象