Question

我有一个表单，允许创建用于上传多个图像的动态文件类型输入字段。该表单似乎有效，除了我试图添加创建以下onchange属性的每个输入字段：

onchange="document.getElementById("imagepre' + counter +'").src = window.URL.createObjectURL(this.files[0])"

但是当我出于某种原因点击添加按钮创建字段时，它会添加如下：

<input class="text-input" id="image2" onchange="document.getElementById(" type="file" accept="image/*" value="image2" "imagepre2"").src='window.URL.createObjectURL(this.files[0])"'>

我不知道为什么它会在getelementbyid部分添加额外的内容。

下面是我用来添加字段的jquery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 images  allowed");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'ImageBoxDiv' + counter);

    newTextBoxDiv.after().html('<p class="field"><label class="label" for="image' + counter +'">Image  #'+ counter + '</label>' +
      '<input type="file" accept="image/*" class="text-input" id="image' + counter + '" value="image' + counter +'" onchange="document.getElementById(""imagepre' + counter +'"").src = window.URL.createObjectURL(this.files[0])"><img id="imagepre' + counter +'" src="images/image.png" alt="Image '+ counter +'" height="100" width="100"/></p>');

    newTextBoxDiv.appendTo("#ImageUploads");


    counter++;
      });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#ImageBoxDiv" + counter).remove();

     });


  });
</script>

Answer 1

也许替换这个：

newTextBoxDiv.after().html('...

用这个：

newTextBoxDiv.html('

动态输入文件类型字段

1 个答案: