title: how to pass input type file data in ajax call
body: <p>I've my form</p>
  
  <pre><code>&lt;form name="photo" enctype="multipart/form-data" action="&lt;?php echo $_SERVER["PHP_SELF"];?&gt;" method="post"&gt;
      Photo &lt;input type="file" name="image" size="30" /&gt;
            &lt;input type="submit" name="upload" value="Upload" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The following code is used to upload an image by calling self (the same file) (the codes is from <a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/" rel="nofollow">http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/</a>)</p>
  
  <pre><code>if (isset($_POST["upload"])) { 
      //Get the file information
      $userfile_name = $_FILES['image']['name'];
      $userfile_tmp = $_FILES['image']['tmp_name'];
      $userfile_size = $_FILES['image']['size'];
      $userfile_type = $_FILES['image']['type'];
      $filename = basename($_FILES['image']['name']);
      $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
  
      //Only process if the file is a JPG, PNG or GIF and below the allowed limit
      if((!empty($_FILES["image"])) &amp;&amp; ($_FILES['image']['error'] == 0)) {
  
          foreach ($allowed_image_types as $mime_type =&gt; $ext) {
              //loop through the specified image types and if they match the extension then break out
              //everything is ok so go and check file size
              if($file_ext==$ext &amp;&amp; $userfile_type==$mime_type){
                  $error = "";
                  break;
              }else{
                  $error = "Only &lt;strong&gt;".$image_ext."&lt;/strong&gt; images accepted for upload&lt;br /&gt;";
              }
          }
          //check if the file size is above the allowed limit
          if ($userfile_size &gt; ($max_file*1048576)) {
              $error.= "Images must be under ".$max_file."MB in size";
          }
  
      }else{
          $error= "Select an image for upload";
      }
      //Everything is ok, so we can upload the image.
      if (strlen($error)==0){
  
          if (isset($_FILES['image']['name'])){
              //this file could now has an unknown file extension (we hope it's one of the ones set above!)
              $large_image_location = $large_image_location.".".$file_ext;
              $thumb_image_location = $thumb_image_location.".".$file_ext;
  
              //put the file ext in the session so we know what file to look for once its uploaded
              $_SESSION['user_file_ext']=".".$file_ext;
  
              move_uploaded_file($userfile_tmp, $large_image_location);
              chmod($large_image_location, 0777);
  
              $width = getWidth($large_image_location);
              $height = getHeight($large_image_location);
              //Scale the image if it is greater than the width set above
              if ($width &gt; $max_width){
                  $scale = $max_width/$width;
                  $uploaded = resizeImage($large_image_location,$width,$height,$scale);
              }else{
                  $scale = 1;
                  $uploaded = resizeImage($large_image_location,$width,$height,$scale);
              }
              //Delete the thumbnail file so the user can create a new one
              if (file_exists($thumb_image_location)) {
                  unlink($thumb_image_location);
              }
          }
          //Refresh the page to show the new uploaded image
          header("location:".$_SERVER["PHP_SELF"]);
          exit();
      }
  }
  </code></pre>
  
  <p>Now I want to do this using ajax. How do I pass the file data to the processing file so that I can use something like</p>
  
  <pre><code>$('#uploadBtn').live('click', function(){
          var data = "upload=true";
          $.ajax({
              type: "POST",
              url: "process.php",
              data: data,
              cache: false,
              success: function(data){
              }
          });
      });
  </code></pre>