ファイルを非同期でアップロードする方法

jQueryで非同期にファイルをアップロードしたいです。

以下私のHTMLです。

File

以下jQueryコード

$(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: ");
            }
        });
    });
});

現状はファイルをアップロードする代わりに、ファイル名のみを取得しています。
この問題を解決するにはどうすればよいですか？

HTML5を使えば、あなたはAjaxとjQueryを使ってファイルのアップロードを行うことができます。
それだけでなく、ファイルの情報（名前、サイズ、MIMEタイプ）を取得したり、アップロードの進捗状況も取得することができます。
最近、私もファイルアップローダーを作成する必要がありましたが、FlashもIframeもプラグインも使用したくなかったので、調査を重ねて解決策を思いつきました。

HTML

必要に応じていくつかの方法があります。たとえば「.on(‘change’)」を使う際は下記

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

次に、ボタンのクリックで「$.ajax()」送信する場合

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

ご覧のとおり、HTML5のAjaxとjQueryを使用すると、ファイルのアップロードが可能になるだけでなく、非常に簡単になります。
また、サンプルのものは一部ブラウザで非対応なので注意してください。

https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously