Question

在将filenanme显示到其对应字段时出现问题。
现在，当我在附加div中浏览文件时，其文件名将显示在父div中，而不是动态附加的div中。

表格

<!-- start other_docx  -->
<div class="img_field">
  <div class="j-row ">
    <label class="j-label">Other Documents</label>
    <div class="j-span9 j-unit">
      <label class="j-input j-append-small-btn">
        <label class="j-icon-left" for="files[]">
          <i class="fa fa-download"></i>
        </label>
        <div class="j-file-button">
          Browse
          <!-- <input type="file" name="files[]" onchange="document.getElementById('files[]').value=this.value;"> -->
          <input type="file" name="files[]" onchange="setfilename(this.value);">
        </div>
        <input type="text" id="files[]" readonly="" placeholder="No file selected">
        <span class="j-hint">Only: jpg / png / Pdf</span>
      </label>
    </div>

    <div class="j-span3 j-unit">
      <div class="" style="margin-top:5px">
        <button style="" class="btn btn-sm btn-primary add_more_button">Add more</button>
      </div>
    </div>
  </div>
</div>
<!-- end other_docx -->

setfilename（）

<script>
 function setfilename(val)
{
  var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
 document.getElementById("files[]").value = fileName;
}
</script>

js

$(document).ready(function() {
   var max_fields_limit      = 10; //set limit for maximum input fields
   var x = 1; //initialize counter for text box
   $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
       e.preventDefault();
       if(x < max_fields_limit){ //check conditions
           x++; //counter increment
           // $('.img_field').append('<div><input type="file" name="files[]" class="form-control"/><a href="#" class="remove_field" style="margin-left:10px;color:red;">Remove</a></div>'); //add input field
           // var name="document.getElementById('files[]').value=this.value;";
           $('.img_field').append('<div class="j-row">' +
                                    '<div class="j-span9 j-unit">' +
                                      '<label class="j-input j-append-small-btn">' +
                                        '<label class="j-icon-left" for="files[]">' +
                                          '<i class="fa fa-download"></i>' +
                                        '</label>' +
                                        '<div class="j-file-button"> Browse' +
                                        '<input type="file" name="files[]" onchange="setfilename(this.value);">' +
                                        // '<input type="file" name="files[]" onchange="'+name+'">' +
                                        '</div>' +
                                        '<input type="text" id="files[]" readonly="" placeholder="No file selected">' +
                                        '<span class="j-hint">Only: jpg / png</span>' +
                                      '</label>' +
                                    '</div>' +
                                    '<div class="j-span3 j-unit">' +
                                      '<div class="" style="margin-top:5px">' +
                                      '<button style="" class="btn btn-sm btn-danger remove_field">Remove</button>' +
                                      '</div>' +
                                    '</div>' +
                                  '</div>');

       }
   });
   $('.img_field').on("click",".remove_field", function(e){ //user click on remove text links
       e.preventDefault();
       // $(this).parent('div').remove();
       $(this).closest("div.j-row").remove();

       x--;
   })
});

这就是我的表格。.
enter image description here

我是jquery的新手。任何帮助将不胜感激。
先感谢您。！

//编辑
现在可以正常工作。我为每个动态创建的元素将ID'files []'替换为唯一ID。
感谢 Ouroborus 提到了错误。

在动态创建的多个文件中显示文件名

0 个答案: