进度条上传到S3 Django

Question

我想为从Django站点上传S3显示一个上传进度条。目前，JQuery没有操纵进度条，上传直接工作到S3。一旦我尝试使用JQuery实现进度条，上传表单仍然可以接受输入和文件，但不会将文件传递给S3

以下是上载视图：

from .forms import UploadForm

def upload(request):
    if request.method == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('upload')

    else:
        form = UploadForm()

    context = {
        'form': form
    }

    return render(request, 'content/upload.html', context)

以下是HTML：

{% extends "about/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% block navbar %}{% endblock %}

<div class="site-section mb-5">
  <div class="container">
   <div class="form-register">
     <form method="POST" enctype="multipart/form-data">
         {% csrf_token %}
             <legend>Upload Content</legend>
             <div class="form-group">
               {{ form | crispy }}
            </div>
             <button class="btn btn-outline-info" type="submit">Upload</button>
     </form>

     <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
           0%
        </div>
      </div>
    </div>
  </div>
{% endblock %}

以下是JQuery：

$(document).ready(function() {

    $('form').on('submit', function(event) {

        event.preventDefault();

        var formData = new FormData($('form')[0]);

        $.ajax({
            xhr : function() {
                var xhr = new window.XMLHttpRequest();

                xhr.upload.addEventListener('progress', function(e) {

                    if (e.lengthComputable) {

                        console.log('Bytes Loaded: ' + e.loaded);
                        console.log('Total Size: ' + e.total);
                        console.log('Percentage Uploaded: ' + (e.loaded / e.total))

                        var percent = Math.round((e.loaded / e.total) * 100);

                        $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

                    }

                });

                return xhr;
            },
            type : 'POST',
            url : '/upload',
            data : formData,
            processData : false,
            contentType : false,
            success : function() {
                alert('File uploaded!');
            }
        });

    });

});

我假设JQuery中有一些东西需要更改，因为我正在重写默认的submit按钮操作，但我不确定到底要更改什么，以确保文件通过django-storages和boto3进入S3，这些包用于与S3通信