title: CodeIgniter 'You did not select a file to upload' with ajax
body: <p>There are several Questions like this but I've checked them all and they don't appear to help me. I'm using CodeIgniter 2.1.4 and I'm trying to upload a file using ajax and the File Uploading Class. Whatever I try I always get the error 'You did not select a file to upload'.</p>
  
  <p>I have the Controller as:</p>
  
  <pre><code>class Img extends CI_Controller {
  
      public function __construct()
      {
          parent::__construct();
          $this-&gt;load-&gt;helper(array('form', 'url'));
      }
  
     public function index()
     {
            $this-&gt;load-&gt;view('img/index');
     }
  
     public function upload()
     {
  
            $imgfile = $_POST['imgfile'];
  
            $config['upload_path'] = 'upload/';
            $config['allowed_types'] = 'gif|jpg|png';
            $config['max_size']   = '100';
            $config['max_width']  = '1024';
            $config['max_height']  = '768';
  
            $this-&gt;load-&gt;library('upload', $config);
            if (!$this-&gt;upload-&gt;do_upload('imgfile'))
            {
                   $data = array('error' =&gt; $this-&gt;upload-&gt;display_errors('', ''));
                   $result['success'] = 1;
                   $result['message'] = $data['error'];
            }
            else
            {
                   $data = array('upload_data' =&gt; $this-&gt;upload-&gt;data());
                   $result['success'] = 0;
                   $result['message'] = "Image Uploaded";
            }
  
            die(json_encode($result));
  
     }
  </code></pre>
  
  <p>And the View 'img/index' as:</p>
  
  <pre><code>&lt;div id="alert" class="alert"&gt; &lt;/div&gt;
  
  &lt;form id="addForm" action="" method="post" accept-charset="utf-8" enctype="multipart/form-data"&gt;
  &lt;input type="file" name="imgfile" id="imgfile" size="20" /&gt;
  &lt;button type="submit" id="submit_add" name="submit_add"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  $("#addForm").submit(function(e)
  {
  
      e.preventDefault();
  
      var imgfile = $("#imgfile").val();
  
      $.ajax({
          type: "POST",
          url: "?c=img&amp;m=upload",
          dataType: "json",
          data: 'imgfile='+imgfile,
          cache: false,
          success: function(result){
  
              $('#alert').empty().append(result.message);
  
          }
  
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT: 
  I'm including the malsup.com jQuery Form Plugin in the header</p>