jqueryで、formに囲まれてないtype=fileのinputのファイルを取得してajaxで送ることは可能 #JavaScript

jQueryで form 要素に囲われていない input[type="file"] の変更によってファイルの送信を行う際は、以下のような記述をします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <title>ファイルを送信します君</title>
  </head>
  <body>
    <div>
      <input type="file">
    </div>
    <script>(function() {
  'use strict';

  var UPLOAD_URL = 'http://example.com/upload.cgi';

  function send(file) {
    return new Promise(function(resolve, reject) {
      var req = new XMLHttpRequest();
      var body = new FormData();
      req.open('POST', UPLOAD_URL);
      req.addEventListener('load', function(event) {
        if (req.status === 200) {
          resolve(event);
        } else {
          reject(event);
        }
      });
      req.addEventListener('error', reject);
      body.append('imagedata', file);
      req.send(body);
    });
  }

  $(document).on('change', '[type="file"]', function(event) {
    event.preventDefault();
    var target = event.target;
    var file = target.files[0];
    file && send(file);
    return false;
  });
})();</script>
  </body>
</html>