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 [＆＃39; filename＆＃39;]这就是问题所在，我不知道如何将文件从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对象来发送文件，所以我用文件属性输出文件，只是创建了带有追加功能的文件放入文件并作为常规数据发送，这里看起来像什么像

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']

使用普通的AJAX / JS和Django上传文件

1 个答案: