Загрузка файла через AJAX с формой Django

Question

Я пытаюсь создать систему, которая позволяет загружать текст и файл через мою форму Django. Всякий раз, когда я пытаюсь опубликовать форму, я могу только представить часть сообщения в форме. Я слежу за this Ответ для справки, но у меня были проблемы. Во-первых, моя форма выглядит следующим образом:

class MessageForm(forms.Form): 
    message = forms.CharField(widget=forms.Textarea, required=False) 
    file = forms.FileField(label="Attachment", required=False) 

и это оказано HTML как это:

<form id="message-form" enctype="multipart/form-data"> 
    {{form.message}}<br> 
    {{form.file}} 

    <div class="sectio4-bottom"> 
     <div class="right-bottom"> 
      <input id="send-button" type="submit" value="Send"/> 
     </div> 
    </div> 
</form> 

Текущая версия моей функции JS Я работаю с внешностью совсем так:

$('html').on('submit', '#message-form', function(e){ 
    e.preventDefault(); 
    var data = new FormData($('#message-form').get(0)); 
    $.ajax({ 
     url: '#', 
     type: 'POST', 
     data: { 
     'data': data, 
     'csrfmiddlewaretoken': $('.csrftoken').text() 
     } 
    }); 
    return false; 
}) 

, но часть меня интересует var data = new FormData($('#message-form').get(0));. Я получил это из связанного вопроса, но когда он работает, он дает мне пустой объект. Я также пробовал передавать данные как 'data': $('#message-form').serialize(), но когда он попадает на бэкэнд, и я смотрю на request.POST, я вижу, что единственное, что включено в data, - это сообщение, которое я отправляю. request.FILES пуст.

Как я могу получить доступ к указанному файлу?

Answer 1

Попробуйте добавить:

data.append('file',$("#file").files[0]); #Assume 'file' is id of your file field 

после

var data = new FormData($('#message-form').get(0)); 

---

Вот пример функции, которые я использую

function saveVeichle() { 
    $(".sk-wave").show(); 
    var dati = new FormData(); 
    dati.append('csrfmiddlewaretoken','{{csrf_token}}'); 
    dati.append('note',$("#note").val()); 
    dati.append('dip',$("#dip-0").val()); 
    dati.append('stato',$("#stato").val()); 


    $("input").each(function(id,obj){ 
     if (obj.type == 'checkbox') { 
      dati.append(obj.name,obj.checked); 
     } else { 
      dati.append(obj.id,obj.value); 
     } 
    }); 

    dati.append('foto',$(".foto")[0].files[0]); 
    dati.append('libretto',$(".libretto")[0].files[0]); 
    $.ajax({ 
     url: "/mezzi/api/salva_mezzo/", 
     type: "POST", 
     data: dati, 
     cache: false, 
     contentType: false, 
     processData: false, 
    }).done(function(data) { 
     if (data.res == 'ok') { 
      window.location = '/mezzi/' + data.id + '/'; 
     } else { 
      if (data.errors) { 
       for (d in data.errors) { 
        noty_alert(d + ":" + data.errors[d]); 
       } 
      } else { 
       noty_alert('Errore Salvataggio Mezzo!'); 
      } 
      $(".sk-wave").hide(); 
     } 

    }); 
}