預覽上傳的圖像

Question

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

這就是我的網頁的工作方式。

我有滑雪用品店的登記表
一個人可以申請很多人（例如父親可以申請他的家庭）
因此，將根據會員的數量生成注冊表。
因此，每個注冊表格都添加為表格的一行。


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

所以這是關於我的網站。

我的問題是如何在此問題中更改javaScript以處理圖像查看器和圖像選擇器的動態ID。

根據圖像有三種形式。

因此，文件選擇器ID為“ file_img_0”，“ file_img_1”，“ file_img_2”，圖像查看器ID為“ user_img_0”，“ user_img_1”，“ user_img_3”。
因此，這些ID是根據家庭成員的編號自動用代碼生成的

因此，在這種情況下，如何有多個ID，但是在上一個問題中它處理單個圖像。所以ID是一個不同的ID。但是這里有多個圖像選擇器ID。所以任何人都可以幫助我調整上一個問題中的javascript以適應解決我的問題或給我新的解決方案。

Answer 1

您有很多選擇可以解決此問題。 如果您不想使用JQuery，則可以使用數據屬性。

在HTML中定義輸入時，您可以給它屬性：

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

，您可以在其中定義預覽ID，並在Javascript中根據該ID設置預覽：

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

實際觀看