为什么 django 不使用拖放文件上传重定向到新的 url？答案

【问题标题】：Why doesn't django redirect to new url using drag-and-drop file upload?为什么 django 不使用拖放文件上传重定向到新的 url？
【发布时间】：2019-09-20 22:03:52
【问题描述】：

我想结合拖放功能使用 Django 和 HTML 上传文件。我可以上传文件并将其保存到模型“文档”中。之后，我想被重定向到'user:datapreparation'，它将在新页面中显示数据框。但是，我没有被重定向并且我停留在同一页面上（“user:userform”）。

你也许知道为什么我没有被重定向到数据准备？

特此代码。感谢您的帮助！

查看：

class FileUploadView(View):
    form_class = DocumentForm
    template_name = 'user/model_form_upload.html'

    def get(self, request):
        form = self.form_class(None)
        return render(request, self.template_name, {'form': form})

    def post(self, request):

        document_name = str(request.FILES['file'])

        if request.FILES['file'].size < 31457280:  # max 30 mbs allowed
            form = self.form_class(request.POST, request.FILES)
            document_type = str(document_name.rsplit(".", 1)[1])
            valid_document_types = ["txt", "csv", "xlsx"]
            if document_type in valid_document_types:

                a = Document.objects.all()[0]
                a.file = request.FILES['file']
                a.description = document_name
                a.save()
                return redirect('user:datapreparation')

型号：

class Document(models.Model):
    description = models.CharField(max_length=255,blank=True)
    file = models.FileField(upload_to='documents/')

网址：

from django.conf.urls import url
from . import views

app_name = 'user'

urlpatterns = [
    # upload
    url(r'^upload/$', views.FileUploadView.as_view(), name='userform'),
    # data preparation - dataframe creation
    url(r'^datapreparation/$', views.DataPreparation.as_view(), name='datapreparation'),
]

HTML：

<div id="upload"></div>
    <form class="dropzone" action="{% url 'user:datapreparation' %}" method="post" enctype="multipart/form-data" id="dropzone">{% csrf_token %}
        <div>
            Drop files here
        </div>
    </form>


<script>
(function() {

        var form = document.querySelector('form');
        var dropzone = document.getElementById('dropzone');


        dropzone.ondrop=function(ev){
        ev.preventDefault();
        this.className='dropzone';

        var data = new FormData(form);
        var xhr = new XMLHttpRequest();
        var file = ev.dataTransfer.files[0]
        console.log(file)

        xhr.open('POST', "/user/upload/")
        data.append('file', file)
        xhr.send(data)
        };

        dropzone.ondragover = function () {
            this.className = "dropzone dragover";
            return false;
        };

        dropzone.ondragleave = function () {
            this.className = 'dropzone';
            return false;
        };
    }());

【问题讨论】：

标签： html django drag-and-drop url-redirection

【解决方案1】：

来自 django 的响应由 javascript 处理，因此您可以在 django 视图中返回 URL（例如使用 reverse 方法），然后在 javascript 中返回 window.location.href。您可以查看如何向 XMLHttpRequest 添加回调 here

【讨论】：

非常感谢！在“xhr.send(data)”之后，我添加了以下行： setTimeout(function(){ window.location.href = "{% url 'user:datapreparation' %}" }, 1000);需要 setTimeout 给 Django 后端时间来处理文件（工作到我的 30mbs 的限制）。我不知道这是否正是您的意思，但它为我完成了工作！
最好的方法是使用提到的回调。这样，回调会在 django 视图返回时执行。

【解决方案2】：

我相信您在重定向中缺少反向机制。

from django.urls import reverse
return redirect(reverse('user:datapreparation'))

【讨论】：