Question

我正在尝试创建一个页面，从文本字段中获取输入，动态创建多个文件输入字段。上传图像后，图像将在文档中预览。

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创建的输入字段不起作用。问题是什么？

动态多输入创建和图像预览

0 个答案: