JavaScript
Ajax

JavaScriptのAjaxでローカルファイルをアップロードする

jQueryを使わない生のJavaScriptでファイルをアップロードする。コールバックの処理にPromiseを用いてコードをシンプルにしている。

<!-- アップロードフォーム -->
<form id="form">
  <input type="file" name="file_1">
  <input type="submit" value="アップロード">
</form>

<script>
  // アップロードライブラリ
  var upload = function(endpoint, element) {
    return new Promise(function(resolve, reject) {
      element.addEventListener('submit', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('loadend', function () {
          var result = JSON.parse(xhr.responseText);
          if (xhr.status === 200) {
            resolve(result);
          } else {
            reject(result);
          }
        });
        xhr.open("POST", endpoint, true);
        xhr.send(new FormData(element));
      });
    });
  };

  // アップロードイベントの設定
  var form = document.getElementById('form');
  upload("http://example.com/uploader", form).then(function(it) {
    alert("success");
    console.log(it);
  }, function(it) {
    alert("failed");
    console.log(it);
  });
</script>