Динамическое создание нескольких входов и предварительный просмотр изображения
Я пытаюсь сделать страницу, где принимая данные из текстового поля, динамически создавать несколько полей ввода файла. После загрузки изображения оно будет предварительно просмотрено в документе.
HTML часть
<body>
<input type="number" id="total_member" name="total_member" value="">
<a href="#" id="member_go" onclick="memberdetails()">Go</a>
<form id="form" runat="server">
</form>
</body>
часть JavaScript
<script type='text/javascript'>
var input_id;
$(window).load(function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+'target'+input_id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".image").change(function(){
var target_input = $(this).attr('id');
input_id=target_input;
readURL(this);
});
});
function memberdetails()
{
var number = document.getElementById("total_member").value;
var container = document.getElementById("form");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var image=document.createElement("img");
image.setAttribute("id","target"+i);
image.setAttribute("style","width:250px; height: 250px");
image.src="../images/default.png";
container.appendChild(image);
var file=document.createElement("input");
file.type="file";
file.setAttribute("id",i);
file.setAttribute("class","image");
container.appendChild(file);
}
}
Вместо приведенной выше части HTML, если я напишу
<input type='file' id="1" class="image" />
<img id="target1" src="#" style="width:250px; height: 250px;" />
<input type='file' id="2" class="image" />
<img id="target2" src="#" style="width:250px; height: 250px;" />
Затем эти два раздела работают. Поля ввода, созданные js, не работают. В чем проблема?