使用普通AJAX/JS和Django的

Question

上傳文件，這是我的彈出的形式

<div class="popup media-upload-form"> 
    <div class="border cf"> 
    <div class="close">X</div> 
    </div> 
    <form class="cf" action="" method="POST" enctype="multipart/form-data"> 
    {% csrf_token %} 

    <!-- {{ form.as_p }} this is what i use, just putting plain html to show you all inputs --> 
    <p> 
     <label for="id_audio">Audio:</label> 
     <input type="file" name="audio" required id="id_audio" /> 
    </p> 
    <input class="button" type="submit" value="Upload" /> 
    </form> 
</div> 

這個我怎麼用來做什麼的沒有Ajax

def upload_media(request): 
    if request.method == 'POST': 
     form = forms.MediaForm(request.POST, request.FILES) 
     if form.is_valid(): 
      media_file = form.cleaned_data['audio'] 
      media = models.PlayerMedia() 
      media.user = request.user 
      media.title = str(media_file) 
      media.description = 'good song' 
      media.media = media_file 
      media.save() 

     return HttpResponse('done') 

文件從requets.FILES來['文件名']，這就是問題所在，我不知道如何將文件從js發送到django視圖。 JQuery有一些插件，但我想沒有任何庫。

這是我迄今爲止

var uploadForm = document.querySelector('.media-upload-form form'); 
var fileInput = document.querySelector('.media-upload-form form #id_audio'); 

uploadForm.onsubmit = function(e) { 
    e.preventDefault(); 

    var fileToSend = fileInput.value; // this is not it 
} 

所以我怎麼參考選定文件和使用Ajax發送到Django的處理？

Answer 1

我明白了！

事實證明，我需要一個FORMDATA對象發送的文件，所以我得到的文件進行輸入與文件屬性，剛剛創建FormField放在文件，附加功能和發送的常規數據，這裏是什麼樣子

var mediaFile = fileInput.files[0]; 
var formData = new FormData(); 
formData.append('media', mediaFile); 

request.send(formData); // done 

，然後從與request.FILES Django的視圖收到它

def upload_media(request): 
    if request.method == 'POST': 
     media_file = request.FILES['media']