XMLHttpRequest для jQuery Ajax

Question

У меня есть этот код, и я хочу использовать его с помощью jQuery Ajax.

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 < 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 >= 200 && this.status < 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;
});

Я уже попробовал сделать это сам, но это не сработало.

Код, который я пробовал:

$.ajax({
      url: "https://api.imgur.com/3/image",
      method: "POST",
      headers: {
            'Authorization':'Client-ID xxxxxxxxxxxxxxx'
      },
      data: fd,
      success: function(response) {
            console.log(response);
      }
});

Но ошибка в журналах:

Uncaught TypeError: Недопустимый вызов

Это работало, если я удаляю data: fd, но данные требуются.

Answer 1

$.ajax({
    url: 'https://api.imgur.com/3/image',
    method: 'POST',
    data: fd,
    processData: false,
    headers: { 'Authorization': 'Client-ID xxxxxxxxxxxxxxx' },
    success: function(data){
        //do your parsing here
    }
});