0

This is my javascript file.

var total_image = 1;

//add more images for products

function add_more_images()
{

total_image++;
var html='<div class="form-group" id="add_image_box'+total_image+'"><label>Image</label><div class="input-group form-group" ><div class="custom-file"><input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile" required><label class="custom-file-label" for="exampleInputFile">Choose Image...</label></div>&nbsp;&nbsp;<div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("'+total_image+'")>Remove Image</button></div></div></div>';
jQuery('#image_box').after(html);
}

This is my .php file

<div class="form-group">
                    <label>Image</label>
                    <div class="input-group form-group" id="image_box">
                        <div class="custom-file">
                            <input type="file" name="image[]" accept="image/*" class="custom-file-input" id="exampleInputFile" required>
                            <label class="custom-file-label" for="exampleInputFile">
                                Choose Image...
                            </label>
                        </div>&nbsp;&nbsp;
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button" onclick="add_more_images()">Add Another Image</button>
                        </div>
                    </div>
                </div>

I want to add multiple images to my project and I have tried this code

$('input[type="file"]').change(function(e) {
       var fileName = e.target.files[0].name;
       // change name of actual input that was uploaded
       $(e.target).next().html(fileName);
    });

and this too

$('input[type=file]').change(function(e){
      $in=$(this);
      $in.next().html($in.val());
    });

it's displaying the image name but only for the input type="file" which is in my .php file but when I am clicking on the add_more_images() and when it's adding a new input field of type="file" into my form and when I am adding an image in that field then the particular field is not showing the selected image name please help me.

ElsaKarami
  • 624
  • 1
  • 4
  • 14
CODE IT
  • 1
  • 1

1 Answers1

0

The problem is in your change event of your input that you created dynamically, first, you need to refer to the element that exists from the beginning in your HTML and then refer to the input with the method on, also instead of use after in your function add_more_images use append because your new element will be outside the image_box element and when you create your new input don't will work as you expected to like this:

var total_image = 1;

//add more images for products

function add_more_images()
{

  total_image++;
  var html='<div class="form-group" id="add_image_box'+total_image+'"><label>Image</label><div class="input-group form-group" ><div class="custom-file"><input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile" required><label class="custom-file-label" for="exampleInputFile">Choose Image...</label></div>&nbsp;&nbsp;<div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("'+total_image+'")>Remove Image</button></div></div></div>';
  jQuery('#image_box').append(html);
}

$(document).ready(function(){

  $('#image_box').on('change', 'input[type="file"]', function(e) {
      var fileName = e.target.files[0].name;
      // change name of actual input that was uploaded
      $(this).next().html(fileName);
  });

})
Jose Lora
  • 1,392
  • 4
  • 12
  • 18