Django bootstrap：使用模态表单时，文件未与 Post 一起发送

Question

在我的 Django 应用程序中有一个页面，用户可以在其中从本地计算机上传文件（以及执行其他操作）。

我构建的流程是这样的：用户点击“+”，出现一个模态表单，用户在他们的本地机器上浏览一个文件，select然后当他们点击保存时我提交表单.

但是，由于某种原因，文件没有发布，但似乎我只发布了文件名。但是我想不通为什么。

file page

...
<div class="list-files__btn-plus-wrp">
   <a class="list-files__btn-plus" href="#" data-bs-toggle="modal" data-bs-target="#modal">
    <img src="{% static 'action/img/project/files/icon_plus-file.svg' %}" alt="+">
  </a>
</div>
{% include 'action/forms/modals/modal.html' %}

modal.html


<div class="modal fade" tabindex="-1" role="dialog" id="modal" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- Popup -->
            <div class="pop-up-form">
                <div class="pop-up-form__wrp">

                    <!-- Title -->
                    <div class="pop-up-form__title-wrp">
                        <h2 class="pop-up-form__title">Dialog Title</h2>
                    </div>
                    <!-- END Title -->

                    <!-- Form -->
                    <form action="{% url 'action:project_files' project_id=project.id %}" method="POST" class="pop-up-form__form">
                        {% csrf_token %}

                        <!-- Input File Name -->
                        <div class="pop-up-form__input-wrp">
                            <label class="pop-up-form__label" for="fileName">File Name</label>
                            <input class="pop-up-form__input" id="fileName" name="fileName" type="text" placeholder="File Name">
                        </div>
                        <!-- END Input File Name -->

                        <!-- Input Link -->
                        <div class="pop-up-form__input-wrp">

                            <!-- Link -->
                            <div class="pop-up-form__input-two-wrp">
                                <label class="pop-up-form__label" for="inputLink">Link</label>
                                <input class="pop-up-form__input" id="inputLink" name="inputLink" type="text" placeholder="https://">
                            </div>
                            <!-- END Link -->

                            <!-- Local File Name -->
                            <div class="pop-up-form__local-input-wrp">
                                <img src="{% static 'action/img/project/files/icon_paperclip-solid.svg' %}" alt="Added">
                                <input type="text" id="fileNameLocal" class="pop-up-form__filename-local" disabled>
                                <span id="deleteFile">
                                    <img src="{% static 'action/img/project/files/icon_close-inputfile.svg'%}" alt="Close">
                                </span>
                            </div>
                            <!-- END Local File Name -->

                        </div>
                        <!-- END Input Link -->

                        <!-- WRP Text & Upload -->
                        <div class="pop-up-form__input-wrp-all">
                            <p class="pop-up-form__input-text">OR</p>
                            <div class="pop-up-form__file-upload">
                                <label>
                                    <input type="file" name="userfile[]">
                                    <span>Browse</span>
                                </label>
                            </div>
                        </div>
                        <!-- END WRP Text & Upload -->



                        <!-- BTNs -->
                        <div class="pop-up-form__btn-wrp">
                            <button type="button" class="btn-transparent" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn-black">Save</button>
                        </div>
                        <!-- END BTNs -->


                    </form>
                    <!-- END Form -->

                </div>
            </div>
            <!-- END Popup -->
      </div>
    </div>
</div>

view

class ProjectFiles(MyLoginRequiredMixin, TemplateView):
    template_name = 'action/project/file.html'

   def post(self, request, *args, **kwargs):
        instance = get_object_or_404(JobProject, id=kwargs['project_id'])
        if request.POST.get('userfile[]'):
           
            file = request.FILES['userfile[]']
            #Actually, the whole request.FILES is empty

Answer 1

在你的表单中，添加处理文件的enctype

<form action="{% url 'action:project_files' project_id=project.id %}" method="POST" class="pop-up-form__form" enctype="multipart/form-data">
    {% csrf_token %}
   ....

Django bootstrap：使用模态表单时，文件未与 Post 一起发送

Django bootstrap: File is not being sent with the Post when using a modal form

django

bootstrap-modal