无法使用ajax上传文件

Question

I am trying to upload form data using ajax but the issue is that I am not able to upload image/file.

Form Code

<form class="form-inline" id="form_add"  enctype="multipart/form-data"> 
  <input type="file" id="file-input" name="file-input"  accept="image/*" >

  <input type="text" class="form-control name" id="fname" placeholder="First Name" >                            
  <select class="location" id="location" >
    <option value="">Location</option>
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
  </select>
  <button type="submit" class="save_btn"  id="submit" > <img src="save.png" class="Save">   </button>
</form>

Script Code

<script>
  $("#submit").click(function()
    {
      event.preventDefault();
      var filename = $('input[type=file]').val();
      var fname = $("#fname").val();
      var location = $("#location").val();
      if(filename != "" || fname != "" || location != "")
            {
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: {
                        filename : filename,
                        fname:fname,
                        location:location
                      },
                cache: false,
                success: function(result){
                  console.log(result);
                }});
            }
    });
</script>

Backend Code

$ImageFile = $this->input->post('filename');
$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

if (!$this->upload->do_upload('ImageFile')) 
    {
     $error1 = array('error' => $this->upload->display_errors());
     print_r($error1);
    }
else
    {
      $data1 = $this->upload->data();
      echo $data1['file_name'];
    }

In the backend code I am getting the value of $ImageFile as C:\fakepath\pic.jpg but the file is not getting uploaded and the error says that

You did not select a file to upload

Can anyone please tell how i can upload the file

Answer 1

$("#submit").click(function ()
{
    event.preventDefault();
    var filename = $('input[type=file]').val();
    var fname = $("#fname").val();
    var location = $("#location").val();


    if (filename != "" || fname != "" || location != "")
    {
        var formData = new FormData();
        formData.append('filename', $('input[type=file]')[0].files[0]);
        formData.append('fname', fname);
        formData.append('location', location);
        $.ajax({
            type: "POST",
            url: "Data/add_data",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (result) {
                console.log(result);
            }});
    }
});