title: Multiple file upload with AJAX and Codeigniter
body: <p>Hi there I am trying to upload multiple images using ajax and codeigniter. I am new to ajax and jquery so please help me understand what I am doing wrong or not doing</p>
  
  <p>Here is my controller code and upload function:</p>
  
  <pre><code>    private function setup_upload_option()
  {
      $config = array();
      $config['upload_path'] = './data/images/gallery_images';
      $config['allowed_types'] = 'jpg|png|gif';
      $config['encrypt_name'] = TRUE;
      $config['overwrite'] = FALSE;
      return $config;
  }
  
  function upload()
  {
      $this-&gt;check_is_validated();
      $data['error'] = array('error' =&gt; '');
      $files = $_FILES;
  
      $id = $this-&gt;input-&gt;post('galleryID');
  
      if ($_POST) {
  
          $count = count($_FILES['userfile']['name']);
          for ($i = 0; $i &lt; $count; $i++) {
              $_FILES['userfile']['name'] = $files['userfile']['name'][$i];
              $_FILES['userfile']['type'] = $files['userfile']['type'][$i];
              $_FILES['userfile']['tmp_name'] = $files['userfile']['tmp_name'][$i];
              $_FILES['userfile']['size'] = $files['userfile']['size'][$i];
              $_FILES['userfile']['error'] = $files['userfile']['error'][$i];
  
              $this-&gt;upload-&gt;initialize($this-&gt;setup_upload_option());
              if ($this-&gt;upload-&gt;do_upload() == FALSE) {
                  $data['error'] = $this-&gt;upload-&gt;display_errors();
                  $data['title'] = 'Create a New Property';
                  $data['content'] = 'admin' . '/gallery';
                  $this-&gt;load-&gt;view('templates/dashboard/template', $data);
              } else {
                  $upload_data = $this-&gt;upload-&gt;data();
                  $data = array(
                      'gallery_id' =&gt; $id,
                      'image_name' =&gt; $upload_data['file_name'],
                      'image_size' =&gt; $upload_data['file_size'],
                      'image_ext' =&gt; $upload_data['file_ext'],
                      'full_path' =&gt; $upload_data['file_path']
                  );
                  $this-&gt;db-&gt;insert('gallery_images', $data);
              }
          }
      }
  }
  </code></pre>
  
  <p>Here is my view file with the ajax and jquery:</p>
  
  <pre><code>&lt;div class="modal fade" role="dialog" id="modalUpload"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;?php echo form_open_multipart('gallery/upload', array('id' =&gt; 'galleryImages')) ?&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="gallery"&gt;Please select which gallery to upload to:&lt;/label&gt;
                      &lt;select class="form-control" name="galleryID"&gt;
                          &lt;option value="0"&gt;&lt;/option&gt;
                          &lt;?php foreach ($gallery as $item) { ?&gt;
                              &lt;option value="&lt;?= $item['ID'] ?&gt;"&gt;&lt;?= $item['gallery_name']; ?&gt;&lt;/option&gt;
                          &lt;?php } ?&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="images"&gt;Please select some images for upload!&lt;/label&gt;
                      &lt;input type="file" name="file[]" class="form-control" id="file" multiple/&gt;
                  &lt;/div&gt;
                  &lt;?php echo form_close(); ?&gt;
              &lt;/div&gt;
              &lt;script&gt;
                  function doUpload() {
  
                      var form_data = {
                          $('#galleryID').val();
                  }
  
                      $.ajax({
                          url: '&lt;?php echo base_url(). 'gallery/upload'?&gt;',
                          type: 'POST',
                          data: form_data,
                          success: function (data) {
                              $('#modalUpload').modal('hide'); // hide the modal
                              $('#galleryImages')[0].reset(); // reset form on modals
                              $('#galimg').load('&lt;?=base_url();?&gt;' + "#galimg"); // reload the view
                          });
                  }
                  }
              &lt;/script&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" style="margin-left: 10px;" class="btn btn-success pull-right"
                          onclick="doUpload()"&gt;&lt;i class="fa fa-upload"&gt;&lt;/i&gt; Upload Images
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&amp;nbsp;&lt;/i&gt;Close
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>My question is how do I pass the selected files through jquery to the controller to upload in the database?</p>