Предварительный просмотр Загружено изображение

Question

На самом деле мой вопрос похож на this вопрос
Первый ответ на этот вопрос вполне применим для моей работы, но все же есть некоторые проблемы, когда он подходит для меня.

Вот как работает моя веб-страница.

У меня есть регистрационная форма для лыжного магазина
Один человек может применяться для многих людей (например, отец может подать заявление на его семью)
Так в зависимости от числа членов регистраций формы будет.
Таким образом, каждая регистрационная форма, как добавляется в качестве строки таблицы ..


Так на самом деле это происходит с loop.Similar код выполняется во время выполнения.
HTML-таблица и другие виджеты, также созданные во время выполнения с кодом C#.

Так что это о моем сайте.

Мой вопрос заключается в том, как изменить JavaScript в this вопросы обработки динамических идентификаторами просмотра изображений и изображение Choosers ..

Согласно изображению есть три формы.

Идентификаторы файлов - «file_img_0», «file_img_1», «file_img_2» и идентификаторы просмотра изображений - «user_img_0», «user_img_1», «user_img_3».
Таким образом, эти идентификаторы автоматически генерируются с кодом в соответствии с номером члена семьи

Итак, в этом случае, как несколько идентификаторов, но в предыдущем вопросе речь идет об одном изображении. Так что идентификатор является отдельным. Но здесь есть несколько идентификаторов выбора изображений. Может ли кто-нибудь помочь мне настроить javascript в предыдущем вопросе, чтобы соответствовать моей проблеме или дать мне новое решение.

Answer 1

У вас есть много возможностей для решения этой проблемы. Если вы не хотите использовать JQuery, вы можете использовать атрибуты данных, например.

В HTML при определении входа вы даете ему атрибут:

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

, где вы определяете идентификатор предварительного просмотра, и в 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