title: how to add image upload along with ajax jquery form submit
body: <p>I am submitting a form using ajax jquery. I would like to upload an image along with the other fields. </p>
  
  <p>Is it possible to make changes to my present script to accomplish it or would I need to redo everything :-</p>
  
  <p>My jquery is :-</p>
  
  <pre><code> &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $(".submit").click(function () {
              var article_title = $("#article_title").val();
              var article_body = $("#article_body").val();
  
              var dataString = 'article_title=' + article_title + '&amp;article_body=' + article_body;
  
              if (article_title == '' || article_body == '') {
                  $('.success').fadeOut(200).hide();
                  $('.error').fadeOut(200).show();
              } else {
                  $.ajax({
                      type: "POST",
                      url: "&lt;?php echo site_url().'/main/submit_article'?&gt;",
                      data: dataString,
                      success: function () {
                          //$('.success').fadeIn(200).show();
                          $('#article_form')[0].reset();
                          $('.error').fadeOut(200).hide();
                      }
  
                  });
              }
  
              return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My HTML form :-</p>
  
  <pre><code>&lt;form name="article_form" id="article_form" class="article_form" method="POST" action=""&gt;
      &lt;input type="text" name="article_title" id="article_title" placeholder="Title for your article" /&gt; &lt;!--&lt;input type="file" name="pic" /&gt;--&gt;
      &lt;br&gt;
      &lt;textarea rows="12" name="article_body" id="article_body" placeholder="Tell your story"&gt;&lt;/textarea&gt;
      &lt;br&gt;
      &lt;input type="submit" name="submit" id="submit" value="Post" class="submit"/&gt;
  &lt;/form&gt;
  </code></pre>