title: jQuery's Ajax callbacks not firing after file upload
body: <p>I have a relatively simple ajax call that uploads a file from an input form to a server:</p>
  
  <pre><code>$(function(){
        $("form").submit(function(){
  
          var infile = $('#pickedfile');
  
          var actFile = infile[0].files[0];
  
          $.ajax(
          {
              type: "POST",
              url: "http://localhost:3000/file_upload",
              data: [
              {
                  file: actFile
              }],
              dataType: 'text',
              success: function ()
              {
                  alert("Data Uploaded");
              },
              beforeSend: function ()
              {
                  alert("Before Send");
                  return false;
              },
              error: function ()
              {
                  alert("Error detected");
              },
              complete: function ()
              {
                  alert("Completed");
              }
          });
  
        });
  
      });
  </code></pre>
  
  <p>And I have a node.js server that successfully receives the file, and reports back:</p>
  
  <pre><code>var express = require('express'),
      wines = require('./routes/testscripts');
  
  var app = express();
  
  app.configure(function(){
    app.use(express.bodyParser());
    app.use(app.router);
  });
  
  app.post('/file_upload', function(req, res) {
  
      //file should be in req.files.pickedfile
  
      // get the temporary location of the file
          // undefined if file was not uploaded
          var tmp_path = req.files.pickedfile.path;
  
          res.send("Hello, this is server");
  
      });
  });
  
  app.listen(3000);
  </code></pre>
  
  <p>The file is uploaded successfully, and everything seems to work fine on the server side.</p>
  
  <p>However, on the front end, none of the alerts are firing, so I'm not able to respond to any new data from the server. Is there some additional step that I'm missing?</p>