How to upload and move file onclick button jquery using codeigniter?

Question

With this code I want to insert and move a file into a folder but when I choose a file and upload it shows me an error in my console:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

How can I solve this problem? Please help me. Thank You

<input type="file" id="multiFiles" name="files" />
<button id="upload_file_multiple" class="btn btn-success add-btn update-btn">Upload</button>

$("#upload_file_multiple").click(function(event) {
  event.preventDefault();
  var form_data = new FormData($("#multiFiles"));
  var id = "<?php echo $this->uri->segment(3) ?>";
  jQuery.ajax({
    type: "POST",
    url: "<?php echo base_url() ?>syllabus/UploadFile/" + id,
    data: form_data,
    processData: false,
    contentType: false,
    success: function(response) {
      $('#afx_khjk').html(response);
    },
    error: function(response) {
      $('#afx_khjk').html(response);
    }
  });
});

public function UploadFile($id)
{
  if (isset($_FILES['files']) && !empty($_FILES['files'])) 
  {
    $rename = 'file_no-'.time().$_FILES["files"]["name"];       
    move_uploaded_file($_FILES["files"]["tmp_name"], 'uploads/syllabus/' . $rename);
    $data =  array(
      'pdf'=>$rename,
      'subjectID'=>$id,
      'unique_id'=>time()
    );
    $this->db->insert('sylabus_pdf',$data);
    $insert_id = $this->db->insert_id();
    echo 'File successfully uploaded : uploads/syllabus/' . $rename . ' ';
    $this->commondata($id);
  } 
  else 
  {
    echo 'Please choose at least one file';
  }
}

Answer 1

The error is because the FormData constructor expects an FormElement object, not a jQuery object containing an input .

To fix this create the FormData object with the empty constructor and use append() to add your file:

var input = document.querySelector('#multiFiles');

var form_data = new FormData();
for (var i = 0; i < input.files.length; i++) {
  form_data.append('files[]', input.files[i]);  
}

Alternatively you can make this more simple by providing the form to the constructor. That way the data in all form controls will be included for you automatically.

var form_data = new FormData($('#yourForm')[0]);

Answer 2

HTML

 <form id="frm_upload_file">
    <input type="file" id="multiFiles" name="files" />
    <button type="submit" id="upload_file_multiple" class="btn btn-success add-btn update-btn">Upload</button>
</form>

Ajax

 $("#frm_upload_file").submit(function (event) {
                event.preventDefault();
                var id = "<?php echo $this->uri->segment(3) ?>";
                var form_data = new FormData(this);
                jQuery.ajax({
                    type: "POST",
                    url: "<?php echo base_url() ?>syllabus/UploadFile/" + id,
                    data: form_data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        $('#afx_khjk').html(response);
                    },
                    error: function (response) {
                        $('#afx_khjk').html(response);
                    }
                });
            });