Django FileUploadField 总是通过“未上传文件”错误验证验证

Question

我正在使用带有 AJAX 表单提交的 django ModelForm 和 CreateView 来允许用户上传文件。即使在选择了文件后，单击提交后，该字段也会设置为空白，并且表单验证失败，声称没有选择任何文件。

我相信我已经处理了这种行为的正常罪魁祸首。我在我的表单中设置了enctype="multipart/form-data" 和method="post"。 ModelForm 保存方法包含文件，所以不知道为什么上传的文件没有通过。

这里是html表单：

    <form id="application_form_id" method="post" action="{% url 'jobs:submit_application_form' job_pk=job.pk %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" id="applicationModalLabel">Apply</h5>
            <button type="button" class="close" id="applicationClose" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div id="application_form_content" class="modal-body">
            {% include 'jobs/basic_form.html' %}
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

这里是CreateView：

class JobApplicationFormView(LoginRequiredMixin, generic.edit.CreateView):
    model = JobApplication
    user_model = User
    context_object_name = 'application'
    form_class = JobApplicationForm
    template_name = 'jobs/student/student_job_detail.html'
    success_url = reverse_lazy('jobs:student_job_detail')

    def form_invalid(self, form):
        response = super().form_invalid(form)
        if self.request.is_ajax():
            valid = False
            data = {
                'form': render_to_string('jobs/basic_form.html', request = self.request, context = {'form' : form}),
                'valid': valid,
            }
            return JsonResponse(data)
        else:
            return response

    def form_valid(self, form):
        form.instance.student_user = self.request.user
        form.instance.job = self.kwargs['job_pk']
        response = super().form_valid(form)
        if self.request.is_ajax():
            valid = True
            data = {
                'form': render_to_string('jobs/student/basic_form.html', request = self.request, context = {'form' : form}),
                'valid': valid
            }
            return JsonResponse(data)
        else:
            return response

这里是 AJAX 调用（虽然我认为这无关紧要，因为我得到了带有错误的表单 html）

// Submit application form via AJAX
$(document).ready(function() {
    var $myForm = $('#application_form_id')
    var initial = $('#application_form_content').html()
    $('#applicationClose').on('click', function() {
        $('#application_form_content').html(initial)
    });
    $myForm.submit(function(event) {
        event.preventDefault()
        var $formData = $(this).serialize()
        $.ajax({
            type: $myForm.attr('method'),
            url: $myForm.attr('action'),
            data: $formData,
            success: handleFormSuccess,
            error: handleFormError,
            dataType: 'json',
        });

        function handleFormSuccess(data, textStatus, jqXHR){
            $('#application_form_content').html(data.form);
            if (data.valid) {
                initial = data.form
                $('##application_form_content').html(data.form)
                $('#applicationModal').modal('hide')
                console.log(valid)
            }
        };

        function handleFormError(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        };
    });
});

Answer 1

我发现了问题。如问题所示序列化和提交表单数据不包括表单中的文件数据。我需要创建一个新的表单数据对象并手动附加文件。

这里是formData documentation。

下面的 AJAX 调用似乎工作正常。

$(document).ready(function() {
    var $myForm = $('#application_form_id')
    var initial = $('#application_form_content').html()
    $('#applicationClose').on('click', function() {
        $('#application_form_content').html(initial)
    });
    $myForm.submit(function(event) {
        event.preventDefault()
        var data = new FormData($myForm.get(0));
        data.append('file', $('#id_cover_letter')[0].files)
        $.ajax({
            type: $myForm.attr('method'),
            url: $myForm.attr('action'),
            data: data,
            processData: false,
            contentType: false,
            success: handleFormSuccess,
            error: handleFormError,
            dataType: 'json',
        });

        function handleFormSuccess(data, textStatus, jqXHR){
            $('#application_form_content').html(data.form);
            if (data.valid) {
                initial = data.form
                $('#application_form_content').html(data.form)
                $('#applicationModal').modal('hide')
            }
        };

        function handleFormError(jqXHR, textStatus, errorThrown){
            console.log(jqXHR.responseText)
        };
    });
});