title: CodeIgniter, Jquery Ajax, Form Submission and File Upload
body: <p>I am working on a website using CodeIgnitor Framework.</p>
  
  <p>Question is related with CodeIgniter, Jquery Ajax, Form Submission and File Upload </p>
  
  <h2>MY HTML is : Given only relevant section of HTML below</h2>
  
  <pre><code>  &lt;form method="post" action="" id="upload_file" enctype="multipart/form-data"&gt;
    &lt;div id="inner2" style="display:none"&gt;
      &lt;div class="trainingcontent" style="height:400px;"&gt;
        &lt;div class="chaptername" &gt;
          &lt;p&gt;Chapter Name&lt;/p&gt;
          &lt;input type="text" id="cname" name="cname" class="awesome-text-box" /&gt;
          &lt;input type="hidden" id="training_id" name="training_id" /&gt;
        &lt;/div&gt;
        &lt;div class="trainingurl"&gt;
          &lt;p&gt;Training Video&lt;/p&gt;
          &lt;input type="text" id="video_url" name="video_url" class="awesome-text-box" placeholder="Paste your video URL here..."/&gt;
        &lt;/div&gt;
        &lt;div class="uploadpdf"&gt;
          &lt;p&gt;Upload PDF&lt;/p&gt;
          &lt;a href="#"&gt;&lt;div class="uploadbutton"&gt;
            &lt;div class="uploadtext"&gt; &lt;input type="file" name="userfile" id="userfile" size="20" /&gt;UPLOAD PDF &lt;/div&gt;
          &lt;/div&gt;&lt;/a&gt;
        &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h2>MY JQUERY CODE is</h2>
  
  <pre><code>function abc(){
  
  var training_id = $('#training_id').attr('value');
  var cname = $('#cname').attr('value');
  var video_url = $('#video_url').attr('value');
  
  $.ajax({  
      type: "POST",  
      url: "../chapters/create",  
      data: "training_id="+training_id+"&amp;cname="+cname+"&amp;video_url="+video_url,
      success: function(returned_html){
          echo returned_html;
      }
  });
  
  }//end of function abc
  </code></pre>
  
  <p>How do I pass input type file data to my controller?</p>
  
  <p>I have tried various approaches but nothing works.</p>