javascript - When I add additional images to the ajax image preview, the previous ones do not appear in the input type FILES array ← (PHP, JavaScript, CSS, HTML)

function previewImages(bu,p_id) {

          
          var preview = document.querySelector('#image_multiple_block33');
          //alert(preview.getAttribute("id"));
          
            if (bu.files) {
                [].forEach.call(bu.files, readAndPreview);
              }

              var files_id = bu.getAttribute("id");
              var img_content_count;
              function readAndPreview(file) {


                // Make sure `file.name` matches our extensions criteria
                if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                  return alert(file.name + " noo support file");
                } // else...
                
                var reader = new FileReader();
                
                
                reader.addEventListener("load", function() {

                    var image = new Image();
                    image.width = 100;
                    image.title  = file.name;
                    image.src    = this.result;


                    var t = document.createElement('div');
                    t.className = 'image_content image'+p_id;
                    t.id = 'image'+p_id;
                    t.setAttribute("id", t.id);
                    t.innerHTML += '<div class="img_content_inner" id="img_content_inner'+p_id+'">'+
                                        '<input type="text" name="image_color" placeholder="Product Color">'+
                                        '<img src="'+image.src+'" width="'+image.width+'%" title="'+image.title+'" />'+
                                        '<div class="multiple_img_del"><span onclick="multiple_image_del('+t.id+')">X</span></div>'+
                                    '</div>'; 

                    //t.append(image);
                    //preview.appendChild(t);

                    var bu = preview.getAttribute("id");
                    var c = document.getElementById(bu).children.length;
                    var list = document.getElementById(bu);
                    list.insertBefore(t, list.children[1]);



                    
                    // append files val 
                    
                    
                   var fileSelect = document.getElementById(files_id);
                   var files = fileSelect.files;
                   var form_data = new FormData();
                   //alert(totalfiles);
                   for (var i = 0; i < files.length; i++) {
                        var fil = files[i];

                        if (!fil.type.match('image.*')) {
                         continue;
                        }

                      form_data.append("multiple_file[]", file, fil.name);
                   }
                    
                     
                    xhr = new XMLHttpRequest(); 
                    
                    xhr.open("POST", "update/home-page-update.php", true);
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhr.send(form_data);
                    
                    
                });

                reader.readAsDataURL(file);
            }
            
        }

.image_multiple {display: flex;flex-wrap: wrap;}
        .image_content {flex: 0 33.333%;flex-wrap: wrap; max-width: 33.333%;padding: 20px; box-sizing: border-box;}
        .image_content:first-child {flex: 0 100% !important;max-width: 100% !important;}
        .image_content form {width: auto !important;}
        .img_content_inner {border:1px dashed #ccc;padding: 10px;position: relative;}
        .img_content_inner:hover .multiple_img_del {display: block;}
        .multiple_img_del {position: absolute;right: 20px;bottom: 20px;display: none;}
        .multiple_img_del span {display: block;background-color: orange; color: #fff;padding: 5px;width:30px;height:30px;line-height:30px;border-radius: 25px; cursor: pointer;}
        .multiple_img_del span:hover {color: #111;}
        .img_content_inner input[type="text"] {padding: 10px; width: 100%; box-sizing: border-box;margin-bottom: 10px; border: 1px solid #ccc;border-radius: 5px;}
        .img_content_inner input[type="text"]:focus { border-color: #3f51b5 }
        form#width_style {width:100%;box-sizing: border-box;}
        .img_content_inner #multiple_label {cursor: pointer;}

<div class="image_multiple" id="image_multiple_block33">
        
        <div class="image_content image_content<?php echo $urun_v->urun_id; ?>">
                                    <div id="img_content_inner" class="img_content_inner">
                                                                                                
                                        <label for="multiple_images<?php echo $urun_v->urun_id; ?>" id="multiple_label">
                                            <span class="img_symbol">&#128228;</span>
                                        </label>
                                        <input id="multiple_images33" name="multiple_file_images[]" type="file" onchange="previewImages(this,'33')" multiple>
                                                                                                            
                                    </div>
                                </div>


    </div>

Solution:

check link for ajax image upload with preview.

https://www.nicesnippets.com/blog/php-ajax-image-upload-with-preview-example

<script type="text/javascript">
$(document).ready(function (e) {
   $("#uploadForm").on('submit',(function(e) {
      e.preventDefault();
      $.ajax({
           url: "upload.php",
         type: "POST",
         data:  new FormData(this),
         contentType: false,
           cache: false,
         processData:false,
         success: function(data)
          {
            $("#targetLayer").html(data);
          },
              error: function() 
          {
          }            
      });
    }));
});
</script>