Please the screenshot how I add more rows....

Input Field and Preview Area:

<td >
 <div ></div>
</td>
<td >
 <input type="file"  name="param_img[]" value="x.pbg">
</td>

Preview Script:

         $('input[type="file"][name="param_img[]"]').val('');
        //Image preview
        $('input[type="file"][name="param_img[]"]').on('change', function(){
            var img_path = $(this).value;
            var param_img_holder = $('.param_img_holder');
            var extension = img_path.substring(img_path.lastIndexOf('.') 1).toLowerCase();
            if(extension == 'jpeg' || extension == 'jpg' || extension == 'png' || extension == 'gif'|| extension == 'webp'){
                if(typeof(FileReader) != 'undefined'){
                    param_img_holder.empty();
                    var reader = new FileReader();
                    reader.onload = function(e){
                        $('<img/>',{'src':e.target.result,'class':'img-fluid','style':'width:110px; height:70px; margin-bottom:10px;'}).appendTo(param_img_holder);
                    }
                    param_img_holder.show();
                    reader.readAsDataURL($(this)[0].files[0]);
                }else{
                    $(param_img_holder).html('This browser does not support FileReader');
                }
            }else{
                $(param_img_holder).empty();
            }
        });

The Problem I am facing is, the first image preview is fine. But when I add one row the image is not showing .... In case of this, What can I do?

CodePudding user response：

There's two main issues in your code.

Firstly you need to select the .param_img_holder element relative to the input which was changed, not all of them in the DOM. You can achieve this by using the this keyword to reference the input which triggered the event, then closest() to get the common tr and find().

In addition, jQuery objects don't have a value property. You need to use val() instead.

Here's working version which includes a couple of other improvements, such as reducing if condition nesting, using an array to hold the valid file extensions and using CSS for styling instead of inline style attributes.

const validExtensions = ['jpeg', 'jpg', 'png', 'gif', 'webp'];

$('table').on('change', '.file-input', function() {
  const $input = $(this);
  const imgPath = $input.val();
  const $imgPreview = $input.closest('tr').find('.param_img_holder');
  const extension = imgPath.substring(imgPath.lastIndexOf('.')   1).toLowerCase();

  if (typeof(FileReader) == 'undefined') {
    $imgPreview.html('This browser does not support FileReader');
    return;
  }

  if (validExtensions.includes(extension)) {
    $imgPreview.empty();
    var reader = new FileReader();
    reader.onload = function(e) {
      $('<img/>', {
        src: e.target.result,
        class: 'img-fluid'
      }).appendTo($imgPreview);
    }
    $imgPreview.show();
    reader.readAsDataURL($input[0].files[0]);
  } else {
    $imgPreview.empty();
  }
});

.param_img_holder {
  display: none;  
}

.param_img_holder img.img-fluid {
  width: 110px;
  height: 70px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td >
      <div ></div>
    </td>
    <td >
      <input type="file"  name="param_img[]" />
    </td>
  </tr>
  <tr>
    <td >
      <div ></div>
    </td>
    <td >
      <input type="file"  name="param_img[]" />
    </td>
  </tr>
</table>