Загрузка изображений в Django с помощью Ajax

Этот вопрос задавался много раз. И после долгих попыток я сдался.

Я пытаюсь загрузить изображение на сервер с помощью функции Ajax. Функция Ajax передает довольно много данных (я удалил ненужную часть).

Функция console.log дает мне пустой массив. Что не так с моей функцией?

Вот HTML:

<form method="POST" id="form-create" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" id="myImg" name="myImg">

</form>

Это сценарий

$(document).on('submit', '#form-create', function (e) {
    e.preventDefault()

    var formData = new FormData();
    formData.append('myIMG', $('#myIMG')[0]);
    console.log(formData)

$.ajax({
    type: 'POST',
    cache: false,
    url: "{% url 'creator:build' %}",
    data: {
         img:formData,
         csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
         },
            
         success: function (data){
              if (data.msg === "Success") {
                   $('h4').html('It worked!');
              }
                
              if (data.msg === 'Fail') {
                   $('h6').html('Sorry! There was a problem...');
              }
            },
        });
    });

Вы передаете HTMLInputElement в formdata.append, вы должны передать файл

formData.append('myIMG', $('#myIMG')[0].files[0]);

Все поля, которые вы хотите отправить в теле ajax-запроса, должны быть в объекте fromdata

formData.append('csrfmiddlewaretoken',  $('input[name=csrfmiddlewaretoken]').val());

При выполнении $.ajax запроса с объектом formdata вы должны передать его в качестве параметра data, а также установить processData и contentType в false

$.ajax({
    type: 'POST',
    cache: false,
    url: "{% url 'creator:build' %}",
    data: formData,  
    contentType: false,
    processData: false,          
    success: function (data){
          if (data.msg === "Success") {
               $('h4').html('It worked!');
          }
            
          if (data.msg === 'Fail') {
               $('h6').html('Sorry! There was a problem...');
          }
        },
    });
});
Вернуться на верх