Javascript - How can I delete file in file input multiples file?

Question

I've a form that use Jquery Form to make a ajax request upload file to server. It's all good and I've made a function that before user click "upload" button, they can view all the files in the input type = "file" in a table, each row has a delete button to delete this row if you don't want to upload the file in this row.

But I don't know how to really delete the file in javascript this.files array? I've known that this is security error then Javascript cannot change the value of input file.

So, how can I simulate a array of files which user has chosen and delete to post request to server?

Please help me!

NOTE: I've solved the problem by myself, and I want to share for someone who want to have a delete file from input multiples. Please, refer to this link

AJAX/PHP based upload with progress bar for large files

In here, you'll have to use xmlHTTPRequest to post file from the list you want to server. So if user deleted some file name in row, your file array will update too. After all, you update your array to server, each element, each xhr request.

Thanks for anybody.

  xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", fileToUpload.name);
        xhr.setRequestHeader("X-File-Size", fileToUpload.size);
        xhr.setRequestHeader("X-File-Type", fileToUpload.type);
        //xhr.setRequestHeader("Content-Type", "application/octet-stream");

Here is my html

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">

<!-- file input not disable it, just hide by position !-->
<input name="FileInput[]" id="FileInput" type="file" multiple style="position: absolute;left: -9999px;"/>

<a href="#" id="addFiles" style="display:inline;">Add Files</a>

<input type="submit"  id="submit-btn" value="Upload" style="display:inline;"/>
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>

Here is my Javascript

// when change fileinput then get it files name and put to array to check new file or not
$('#FileInput').change(function(e){
  if(arrayFiles.length == 0)
  {
      for (var i = 0; i < this.files.length; i++)
{
    // alert(this.files[i].name);
    fileNameNew = this.files[i].name;

            // Check file is valid
    if(checkFileValid(this.files[i]))
    {
    arrayFiles.push(fileNameNew);
            }
}
  }
  // check if new file is in arrayFiles or not
  else
  {
// check if file name is same in arrayFiles
for(var i = 0; i < this.files.length; i++)
       {
  fileNameNew = this.files[i].name;
  flag = true;
          for(var j=0; j < arrayFiles.length; j++)
          {
     fileNameOld = arrayFiles[j];      
     if(fileNameOld == fileNameNew)
     {
flag = false;
break; // same file name then not need to push to arrayFiles
     }
  }

  // file is new in arrayFiles
  if(flag == true)
  {
// fileNameNew is not in arrayFiles so push it to arrayFiles
if(checkFileValid(this.files[i])) // check file name is .hdf
       {
  arrayFiles.push(fileNameNew);
               }
  }
       }
  } // end else check upload new files name
//   alert(arrayFiles.length);  

  // rerender the tbody of table id = "files"
  /*
  $('#files').find('tbody').append("<tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr><tr id='row2'><td>2</td><td>ABCE1234</td><td><a href='#' name='deleteRow' id='delRow_2'>Delete</a></td></tr><tr id='row3'><td>3</td><td>3242efsdfEWRweR3</td><td><a href='#' name='deleteRow' id='delRow_3'>Delete</a></td></tr>");
  */
 tableFilesRender(arrayFiles);

 alert($("#FileInput").val(''));

});

// render tbody of table id = "files"
function tableFilesRender(arrayFiles)
{

 // clear the table files tbody first
 $("#files > tbody").html("");

 // iterrate the arrayFiles and write the array row
 content = "";

 // Row like this: <tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr>
 for(var i = 0; i < arrayFiles.length; i++)
 {
    trStart = "<tr id='row" + i + "'>";
    td1 = "<td>" + (i + 1) + "</td>";
    td2 = "<td>" + arrayFiles[i] + "</td>";
    td3 = "<td><a href='#' name ='deleteRow' id = 'delRow_" + i + "'>Delete</a></td>";
    trEnd = "</tr>";

    content += trStart + td1 + td2 + td3 + trEnd;
 }

 // append content to table #files
  $('#files').find('tbody').append(content);
}

// Check file is valid type
function checkFileValid(file)
{
 fileExtension = file.name.split('.').pop();
 if(fileExtension == "hdf")
 {
    return true;
 }
 alert(file.name + " không hợp lệ, phải là dạng file HDF .hdf!");
 return false;
}

// handle event delete row (created dynamicall), need to get the closet father is #files table and the selector [name='deleteRow']
$("#files").on("click", "[name='deleteRow']", function(event){
 deleteID = $(this).attr("id");
 temp = deleteID.split("_");
 rowID = "row" + temp[1];

 // remove the arrayFiles at rowID
 arrayFiles.splice(temp[1], 1);

 //alert(rowID);
 $("#files #" + rowID).remove(); // remove rowID on files table only
//alert(temp[1] + "Link is clicked!");

 // delete success then rerender the tables files
 tableFilesRender(arrayFiles);
});