预览上传的图像

Question

其实我的问题类似于 this问题这个问题的第一个答案对我的工作非常有用，但在适合我的时候仍有一些问题。

这就是我的网页的工作方式。

我有一个滑雪商店的登记表 一个人可以申请许多人（例如，父亲可以申请他的家人）
因此，根据会员的数量，将生成注册表格 因此，每个注册表格添加为表格的一行..


所以实际上这发生在循环中。类似的代码在运行时执行。
HTML表和其他小部件也在运行时使用C＃代码创建。
所以这是关于我的网站。

我的问题是如何更改this问题中的javaScript来处理图像查看器和图像选择器的动态ID。

根据图像有三种形式。

因此文件选择器ID是＆＃39; file_img_0＆＃39;，＆＃39; file_img_1＆＃39;，＆＃39; file_img_2＆＃39;和图片查看器ID是＆＃39; user_img_0＆＃39;，＆＃39; user_img_1＆＃39;，＆＃39; user_img_3＆＃39;。所以这些ID是根据numbre的代码自动生成的。家庭成员

所以在这种情况下如何有几个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