Отправка файла изображения через AJAX.request.FILES пусто?

Question

Я пытаюсь отправить данные изображения с помощью Ajax.Но request.FILES, который я получаю в бэкэнде, пуст.Я добавил multipart/form-data к моей форме и метод POST.

вот мой AJAX-вызов:

 $(document).on('submit', '#profile_edit_form', function(event){

  event.preventDefault();


  $.ajax({
      url     : "/users/update_profile_info/",
      type    : 'post',
      dataType: 'json',
      data    : $(this).serialize(),
      success : function(data) {

        $('#profile_name_tag').html(data.username);
        $('#username_navbar').html(data.username);

        //SENDING THE IMAGE VIA AJAX HERE
        var img_data = $('#id_image').get(0).files;
        formdata = new FormData();
        formdata.append("img_data", img_data);

        $.ajax({
            url         : "/users/update_profile_image/",
            type        : 'POST',
            enctype     : "multipart/form-data",
            data        : formdata,
            cache       : false,
            contentType : false,
            processData : false,
            success : function(data) {
              console.log('success');
              //$('#profile_picture').html(data.)

            },
            error: function(data) {
              console.log('fail');
            }
        });

      },
      error: function(data) {
          console.log('fail');
      }
  });


});

, а вот моя форма:

   <form id="profile_edit_form" method="POST">
     {% csrf_token %}
     <fieldset class="form-group">
       <legend class="border-bottom mb4"> Profile Info </legend>
             {{u_form|crispy}}
            {{p_form|crispy}}
     </fieldset>
     <button class="btn btn-outline-info" type="submit"> Update Info </button>
   </form>

Как вы можете видеть, я использую циспийные формы.поле изображения находится внутри p_form

, и вот мое django view

@login_required
def update_profile_image(request):
    print(not request.FILES)

    if request.method == 'POST':
        p_form = ProfileUpdateForm(request.POST, request.FILES, instance=request.user)
        if p_form.is_valid():
            p_form.save()

            context = {'None': 'none'}
            return JsonResponse(context)
        else:
            return HttpResponse('None')

print(not request.FILES) возвращает значение True, и изображение, конечно, не загружено.

Я проверил так много похожих вопросов.но во всех них решением было добавление multipart/form-data к форме, которую я уже сделал.Так есть идеи, где проблема?

спасибо!

Answer 1

Я изменил код на

var img_data = $('#id_image').get(0).files[0];
formdata = new FormData();
formdata.append("img_data", img_data);
//console.log(formdata.get("img_data"));

$.ajax({
    url         : "/users/update_profile_image/",
    type        : 'POST',
    //enctype     : "multipart/form-data",   //it is done inside jquery
    data        : formdata,
    cache       : false,
    contentType : false,
    processData : false,
    success : function(data) {
      console.log('success');
      //$('#profile_picture').html(data.)

    },
    error: function(data) {
      console.log('image-fail');
    }
});

и он наконец заработал!

Answer 2

Вы предоставляете всю коллекцию files для FormData.append(), когда она ожидает отдельную сущность.

Попробуйте просто получить доступ к единственному файлу из files и передать его вместо этого:

var img_data = $('#id_image').get(0).files[0]; // note [0]

Я бы также предложил удалить настройки enctype, поскольку jQuery сделает это автоматически, когда вы предоставите объект FormData для запроса.Ручная установка значения может перезаписать настройку с неправильным значением.