Показать имя файла в динамически создаваемых нескольких файлах - PullRequest
0 голосов
/ 06 января 2019

У меня проблема с отображением 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--;
   })
});

и вот так выглядит моя форма ..
введите описание изображения здесь

Я новичок в jquery ... любая помощь будет принята с благодарностью.
Заранее спасибо.!

// Edit
теперь работает нормально. Я просто заменил идентификатор «files []» уникальным идентификатором для каждого динамически создаваемого элемента.
Спасибо Уроборус за упоминание об ошибке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...