預覽上傳的圖片

Question

其實我的問題類似於 this問題
該問題的第一個答案對我的工作非常有用，但在適合我時仍然存在一些問題。

這就是我的網頁的工作原理。

我有一個滑雪商店
一個人可以申請很多人登記表（如父親可以申請家人）
所以根據成員數量的登記表格將會產生。
因此，每個註冊表格添加爲一行表格。


所以實際上發生這種情況與循環。類似的代碼正在運行時執行。
HTML表格和其他小部件也是在運行時用C＃代碼創建的。

所以這是關於我的網站。

我的問題是如何改變的JavaScript在this問題來處理圖像瀏覽器和圖像挑肥揀瘦的動態IDS ..

根據圖像有三種形式。

因此，文件選擇器id是'file_img_0'，'file_img_1'，'file_img_2'和圖像查看器id是'user_img_0'，'user_img_1'，'user_img_3'。
因此，這些ID是根據家庭成員的姓名自動生成的代碼

因此，在這種情況下，有多少個ID，但在之前的問題中它處理單個圖像。因此，這個ID是獨特的。但是，幾個圖像選擇器ID。所以任何人都可以幫助我調整前面問題中的javascript以適合我的問題或給我新的解決方案。

Answer 1

你有很多選擇來解決這個問題。 如果你不想使用JQuery，你可以使用數據屬性作爲例子。

在HTML定義輸入，當你給它的屬性：

<input type="file" ... data-thumbnail="user_img_1" ... /> 

，其中定義預覽的ID，並在Javascript中設置基於該預覽：

var preview = document.getElementById(input.dataset.thumbnail); 

HTML：

<input type="file" name="image0" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_0"/> 
<img id="user_img_0" src="placeholder.png" class="placeholder" /> 
<br><br> 
<input type="file" name="image1" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_1"/> 
<img id="user_img_1" src="placeholder.png" class="placeholder" /> 
<br><br> 
    <input type="file" name="image2" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_2"/> 
<img id="user_img_2" src="placeholder.png" class="placeholder" /> 
<br><br> 

JS：

function previewImage(input) { 
    console.log(input.dataset.thumbnail); 
    var preview = document.getElementById(input.dataset.thumbnail); 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
     preview.setAttribute('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } else { 
     preview.setAttribute('src', 'placeholder.png'); 
    } 
} 

See it in action