title: XMLHttpRequest to jQuery Ajax
body: <p>I have this code and I want it using jQuery Ajax.</p>
  
  <pre><code>var input = document.getElementsByTagName("input")[0], file, target, i, len;
  input.addEventListener("change", function(e) {
      target = e.target.files;
  
      for (i = 0, len = target.length; i &lt; len; i += 1) {
          file = target[i];
      }
      var fd = new FormData();
      fd.append('image', file);
      console.log(fd);
  
  
      var xhttp = new XMLHttpRequest();
      xhttp.open('POST', "https://api.imgur.com/3/image", true);
      xhttp.setRequestHeader('Authorization', 'Client-ID xxxxxxxxxxxxxxx');
      xhttp.onreadystatechange = function () {
          if (this.readyState === 4) {
              if (this.status &gt;= 200 &amp;&amp; this.status &lt; 300) {
                  var response = '';
                  try {
                      response = JSON.parse(this.responseText);
                  } catch (err) {
                      response = this.responseText;
                  }
                  console.log(response);
              } else {
                  throw new Error(this.status + " - " + this.statusText);
              }
          }
      };
      xhttp.send(fd);
      xhttp = null;
  });
  </code></pre>
  
  <p>I already tried it make myself but it did not work.</p>
  
  <p>Code I have tried:</p>
  
  <pre><code>$.ajax({
        url: "https://api.imgur.com/3/image",
        method: "POST",
        headers: {
              'Authorization':'Client-ID xxxxxxxxxxxxxxx'
        },
        data: fd,
        success: function(response) {
              console.log(response);
        }
  });
  </code></pre>
  
  <p>But logs error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Illegal invocation</p>
  </blockquote>
  
  <p>It worked if I delete <code>data: fd</code>, but data is required. </p>