title: Uploading files using jquery without page refresh
body: <p>I have an update profile page. 
  It has three forms, it uses a get request to show any one form.
  Like <code>update_profile.php?type=profile</code> lets the user edit his profile, <code>update_profile.php?type=settings</code> lets the user edit his account settings.</p>
  
  <p>Type: profile has a file input, I want the users to be able to upload without page refresh.
  Now this cant be done using ajax, so I will need a workaround. I've tried the iframe method, xhr2 method and html5 + ajax method which someone posted on stackoverflow.</p>
  
  <p>So if someone would be kind to explain things to me in detailed steps I would appreciate that.
  Here is my html:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;    
  function nouser() {
          $().toastmessage('showToast', {
              text     : 'The user does not exist',
              sticky   : true,
              position : 'middle-center',
              type     : 'error',
              closeText: '',
              close    : function () {
                  console.log("toast is closed ...");
              }
          });
  
      }
  &lt;/script&gt;    
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Update Profile&lt;/title&gt;
  &lt;link rel="shortcut icon" type="image/png" href="includes/template/images/favicon.png" /&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="includes/template/css2/style.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="includes/jquery/toast/resources/css/jquery.toastmessage.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="includes/jquery/notification/css/jquery_notification.css" /&gt;
  
  
  &lt;script type="text/javascript" src="includes/jquery/jquery_v_1.4.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="includes/jquery/toast/javascript/jquery.toastmessage.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="includes/jquery/notification/js/jquery_notification_v.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="includes/jquery/auto_resize/resize.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="includes/jquery/jquery_form.js"&gt;&lt;/script&gt;
  &lt;!--[if IE]&gt;
  &lt;link rel="stylesheet" type="text/css" href="css2/ie.css" /&gt;
  &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="topBar" &gt;
  &lt;marquee&gt;Welcome to The Marshall Meme. Your IP Adress is 127.0.0.1 You are logged in as marshall&lt;/marquee&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div class="logo" &gt;
  
  &lt;a href="http://www.themarshallmeme.com"&gt;&lt;img src="includes/template/images/logo.png"/&gt;&lt;/a&gt;&lt;br/&gt;
  &lt;/div&gt;
  &lt;center&gt;
  &lt;div id="wrap"&gt;
  &lt;br&gt;
  &lt;div class="wrapbg"&gt;
  &lt;span class="corners-top"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;a class='nav' href='index.php'&gt;Home&lt;/a&gt;
  &lt;a class='nav' href='whoson.php'&gt;Whos online&lt;/a&gt;
  &lt;a class='nav' href='logout.php'&gt;Logout&lt;/a&gt; &lt;a class='nav' href='forum.php'&gt;Forum&lt;/a&gt;
  &lt;span class="corners-bottom"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  
  &lt;/div&gt;&lt;div class="wrapbg"&gt;
  &lt;span class="corners-top"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;div id="content"&gt;
  Web name
  &lt;hr class="hr1" /&gt;
  &lt;br /&gt;
  &lt;ul&gt;
  &lt;a href='whats_new.php'&gt;&lt;button class='action greenbtn'&gt;&lt;span class='label'&gt;Whats new?&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href='friend_requests.php'&gt;&lt;button class='action redbtn'&gt;&lt;span class='label'&gt;Friend requests&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href='update_profile.php?type=profile'&gt;&lt;button class='action greenbtn'&gt;&lt;span class='label'&gt;Edit profile&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href='update_profile.php?type=settings'&gt;&lt;button class='action bluebtn'&gt;&lt;span class='label'&gt;Security Settings&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;a href='update_profile.php?type=changepass'&gt;&lt;button class='action greenbtn'&gt;&lt;span class='label'&gt;Change password&lt;/span&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;span class="corners-bottom"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;&lt;div id='emptydiv'&gt; &lt;/div&gt;
  
   &lt;div class="wrapbg"&gt;
  
  &lt;span class="corners-top"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;div id="content"&gt;&lt;br/&gt;
  Update profile
  &lt;hr class='hr1'&gt;
  &lt;form action='' method="POST" enctype="multipart/form-data"&gt;
  &lt;table&gt;
  
  
  Profile picture&lt;br&gt;
  &lt;img src="uploads/profile_pics/TIFF_06_liam-neeson_01.jpg"&gt;&lt;/img&gt; 
  Thumbnail
  &lt;img src="uploads/profile_pics_small/TIFF_06_liam-neeson_01.jpg" ?&gt;&lt;/img&gt;
  &lt;tr&gt;&lt;td class="lTxt"&gt;Change profile picture:&lt;/td&gt; &lt;td&gt;&lt;input type="file" name="pic"/&gt;&lt;/td&gt;&lt;/tr&gt;   
  &lt;tr&gt;&lt;td class="lTxt"&gt;About me:&lt;/td&gt; &lt;td&gt;&lt;textarea name='about'&gt;Updating my profile :|
  fuck yeaaaa&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;tr&gt;&lt;td class="lTxt"&gt;Interests:&lt;/td&gt; &lt;td&gt;&lt;textarea name='interests'&gt;I love web development with jquery and php.
  Really awesome! yea&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;input type='hidden' name='action' value='profile'/&gt;
  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;button id="update_profile" name='update' class="action greenbtn"&gt;&lt;span class="label"&gt;Update profile&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;  
  &lt;/a&gt;&lt;/div&gt;
  &lt;span class="corners-bottom"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;     &lt;script type='text/javascript'&gt;    
  
  $(function(){
      $('form[name=update_stuff]').on("submit", function(e){
          e.preventDefault();
  
          $.ajax({
              url: 'process.php',
              type: 'POST',
              data: $(this).serialize(),
              success: function(data){
                  $('#emptydiv').html(data);
              }
          });
  
      });
  });
  
  
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/br&gt;
  &lt;div id="footer"&gt;
  
  Copyright &amp;copy; 2010-2011, &lt;a href="http://www.themarshallmeme.com"&gt;Marshall Meme&lt;/a&gt;. All rights reserved.&lt;br&gt;
  
  There are no users online&lt;/div&gt;
  &lt;/div&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the jQuery code I normally use to submit forms:</p>
  
  <pre><code>$(function(){
      $('form[name=update_stuff]').on("submit", function(e){
          e.preventDefault();
  
          $.ajax({
              url: 'process.php',
              type: 'POST',
              data: $(this).serialize(),
              success: function(data){
                  $('#emptydiv').html(data);
              }
          });
  
      });
  });
  </code></pre>
  
  <p>I use the $_FILES in php to get the file name and verify its extension and size server side, so i need the information in that. How can this be done?
  Also would i need to change the form name for updating profile and write a different code for it than the other forms in the same page?</p>