How to Remove a File from the Filelist

How do I remove a file from the FileList

If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:

The HTMLInputElement interface
[HTML5] has a readonly FileList
attribute, […]

[emphasis mine]

Reading a bit of the HTML 5 Working Draft, I came across the Common input element APIs. It appears you can delete the entire file list by setting the value property of the input object to an empty string, like:

document.getElementById('multifile').value = "";

BTW, the article Using files from web applications might also be of interest.

Remove a File before Upload from FileList Ajax Upload

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="file" id="multiupload" name="uploadFiledd[]" webkitdirectory multiple >
<button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
<div id="uploadsts"></div>

<div id="par_tag" style="background-color:red;"></div>
<script>
//This is the array or list of file names which are already available. If I select the same name file again, It will match. If Matched, remove that selected file

var filesBuffer = ["2.jpg", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "530-1 CHARLI MUSCAT - SC_100 8 U COMBINED STRAIGHT WALTZ TAP.mp3", "1-ZOE CAMPBELL - 294-SOLO-CLASSICAL-6 YEARS AND UNDER.mp3", "10-ZOE CAMPBELL - 306-SOLO-TAP-6 YEARS AND UNDER.mp3"];

function findValueInArray(value,arr){
  var result = "0";
 
  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      result = '1';
      break;
    }
  }

  return result;
}

function uploadajax(cl){

    var fileList = $('#multiupload').prop("files");
    $('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

    var file_name = fileList[cl].name;
    var form_data =  "";

    form_data = new FormData();
    form_data.append("upload_image", fileList[cl]);


    var request = $.ajax({
              url: "uppps.php",
              cache: false,
              contentType: false,
              processData: false,
              async: true,
              data: form_data,
              type: 'POST', 
              xhr: function() {  
                  var xhr = $.ajaxSettings.xhr();
                  if(xhr.upload){ 
                  xhr.upload.addEventListener('progress', function(event){
                      var percent = 0;
                      if (event.lengthComputable) {
                          percent = Math.ceil(event.loaded / event.total * 100);
                      }
                      $('#prog'+cl).text(percent+'%'); 
                      $('#par_tag').append('File: '+file_name+ ' is uploaded <br>' ); 
                      
                   }, false);
                 }
                 return xhr;
              },
              success: function (res, status) {
                  if (status == 'success') {
                     // alert('working');
                      percent = 0;
                      $('#prog' + cl).text('');
                      $('#prog' + cl).text('--Success: ');
                      
                  }
              },
              fail: function (res) {
                  alert('Failed');
              }    
          })
    }

    $('#upcvr').click(function(){
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) {
            var FileName = fileList[i].name;
            var chk = findValueInArray(FileName, filesBuffer);
        if(chk == 0){
            $('#uploadsts').append('<p class="upload-page">'+FileName+'<span class="loading-prep" id="prog'+i+'"></span></p>');
        }else{
             $('#uploadsts').append('<p class="upload-page" style="color:green;">'+FileName+'<span class="loading-prep" id="ssprog'+i+'"> This file exists in FileBuffer</span></p>');
        }
            
        if(chk == 0){
                uploadajax(i);
        }else{
            //alert('This File Already Exist');
        }
            
         }
    });
</script>

JavaScript delete File from FileList to be uploaded

Since you cannot edit the Read Only input.files attribute, you must upload a form using XMLHttpRequest and send a FormData object. I will also show you how to use URL.createObjectURL to more easily get a URI from the File object:

var SomeCl = {  count: 0,  init: function() {    $('#images').change(this.onInputChange);  },  onInputChange: function() {    // reset preview    $('.container').empty();    // reset count    SomeCl.count = 0;    // process files    SomeCl.processFiles(this.files, function(files) {      // filtered files      console.log(files);
      // uncomment this line to upload the filtered files      SomeCl.upload('url', 'POST', $('#upload').get(0), files, 'images[]');    });  },  processFiles: function(files, callback) {    // your filter logic goes here, this is just example
    // filtered files    var upload = [];
    // limit to first 4 image files    Array.prototype.forEach.call(files, function(file) {      if (file.type.slice(0, 5) === 'image' && upload.length < 4) {        // add file to filter        upload.push(file);        // increment count        SomeCl.count++;        // show preview        SomeCl.preview(file);      }    });
    callback(upload);  },  upload: function(method, url, form, files, filename) {    // create a FormData object from the form    var fd = new FormData(form);    // delete the files in the <form> from the FormData    fd.delete(filename);    // add the filtered files instead    fd.append(filename, files);
    // demonstrate that the entire form has been attached    for (var key of fd.keys()) {      console.log(key, fd.getAll(key));    }
    // use xhr request    var xhr = new XMLHttpRequest();    xhr.open(method, url, true);    xhr.addEventListener('progress', function(e) {      console.log('lengthComputable', e.lengthComputable);      console.log(e.loaded + '/' + e.total);    });    xhr.addEventListener('load', function(e) {      console.log('uploaded');    });    xhr.addEventListener('error', function(e) {      console.log('this is just a demo');    });    xhr.send(fd);  },  preview: function(file) {    // create a temporary URI from the File    var url = URL.createObjectURL(file);    // append a preview    $('.container').append($('<img/>').attr('src', url));  }};
SomeCl.init();

.container img {  max-width: 250px;  max-height: 250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form id="upload">  <input name="other" type="hidden" value="something else">  <input name="images[]" id="images" multiple="multiple" type="file">  <div class="container"></div></form>