使用纯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 ['filename']，这就是问题，我不知道如何从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对象来发送文件，所以我通过使用files属性从输入中获取文件，并且刚刚创建了具有append函数的FormField放在文件中并作为常规数据发送，如下所示

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

request.send(formData); // done

然后从Django视图中使用request.FILES接收它

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