title: How can I upload files asynchronously with jQuery?
body: <p>I would like to upload a file asynchronously with jQuery. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $("#uploadbutton").click(function () {
          var filename = $("#file").val();
  
          $.ajax({
              type: "POST",
              url: "addFile.do",
              enctype: 'multipart/form-data',
              data: {
                  file: filename
              },
              success: function () {
                  alert("Data Uploaded: ");
              }
          });
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span&gt;File&lt;/span&gt;
  &lt;input type="file" id="file" name="file" size="10"/&gt;
  &lt;input id="uploadbutton" type="button" value="Upload"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?</p>