Styjun

I have created multiple image upload function with preview and remove option. But when i select files ,suppose 4 images and then it previews 4 images correctly. Now i remove 2 of them from preview and try to upload in database but it still uploading 4 images instead of 2 image.

$(document).ready(function() 
 if (window.File && window.FileList && window.FileReader) 
 $("#vpb-data-file").on("change", function(e) 
 var files = e.target.files,
 filesLength = files.length;

 for (var i = 0; i < filesLength; i++) 
 var f = files[i]
 var fileReader = new FileReader();

 fileReader.onload = (function(e) 
 var file = e.target;
 $("<span class="pip">" +
 "<img class="imageThumb" height="100" width="100" src="" + e.target.result + "" title="" + file.name + ""/>" +
 "<br/><span class="remove">Remove</span>" +
 "</span>").insertAfter("#ml_image");

 $(".remove").click(function() 
 $(this).parent(".pip").remove();
 );

 // Old code here
 /*$("<img></img>", 
 class: "imageThumb",
 src: e.target.result,
 title: file.name + " ).insertAfter("#files").click(function()
 $(this).remove();
 );*/
 );
 fileReader.readAsDataURL(f);
 
 );
 else 
 alert("Your browser doesn't support to File API")
 
);

<div class="card-body">
 <div class="row" id="ml_image" style="margin-top:15px;">
 <div class="col-md-3">
 <label class="form-label">Upload Image<br>
 <span style="font-size:12px;">(For multiple images press ctrl.)</span>
 </label>
 </div>
 <div class="col-md-6">
 <span onclick="product_image();" id="hide_span" class="btn btn-icon btn-primary file_upload_icon" style="margin-top:6px;"><i class="fas fa-cloud-upload-alt" style="font-size:31px;"></i><strong style="color:#000000;padding:10px;font-size:15px;">Choose File...</strong></span><input
 style="display:none;" type="file" name="p_image[]" id="vpb-data-file" multiple />
 </div>
 </div>
 <div class="row" id="vpb-display-preview"></div>
</div>

$p_image = count($_FILES['p_image']['name']);
print_r($p_image);

Here I am counting how many files I want to upload. I am getting 4 instead of 2.

Your remove function must remove file in e.target.files or in the p_image[] tab.