Django многофайловая загрузка не отправляет файлы в каталог

Question

Я бы хотел реализовать функцию многофайловой загрузки на сайт.На сайте уже есть функция загрузки, но для отдельных файлов.Я свободно слежу за Простым лучше, чем сложным: загрузка нескольких файлов Django с использованием Ajax .

Мой код:

views-> mulit_upload.py

class BasicUploadView(View):
    def get(self, request):
        files_list = Multi_File.objects.all()

        #files_list = ['testing_123']

        print ("files_list: {0}".format(files_list))
        return render(self.request, 'myproject/multi_upload.html', {'filesList': files_list})

    def post(self, request):
        form = FileForm(self.request.POST, self.request.FILES)
        if form.is_valid():
            multiFile = form.save()
            data = {'is_valid': True, 'name': multiFile.file.name, 'url': multiFile.file.url}
        else:
            data = {'is_valid': False}
        return JsonResponse(data)

models.py

class Multi_File(models.Model):
    title = models.CharField(max_length=255, blank=True)
    file = models.FileField(upload_to='files/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

forms.py

class FileForm(forms.ModelForm):
    class Meta:
        model = Multi_File
        fields = ('file', )

multi_upload.html

{% load static %}

{% block javascript %}
  <script src="{% static 'myproject/js/jQuery-File-Upload-9.14.1/js/vendor/jquery.ui.widget.js' %}"></script>
  <script src="{% static 'myproject/js/jQuery-File-Upload-9.14.1/js/jquery.iframe-transport.js' %}"></script>
  <script src="{% static 'myproject/js/jQuery-File-Upload-9.14.1/js/jquery.fileupload.js' %}"></script>

  <script src="{% static 'myproject/upload-files.js' %}"></script>
{% endblock %}

{# 1. BUTTON TO TRIGGER THE ACTION #}
<div class="col-md-4">
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <input type="file" name="myfile" multiple>
  <button type="submit">Upload<span class="glyphicon glyphicon-cloud-upload"></span> </button>
</form>
</div>

{# 2. FILE INPUT TO BE USED BY THE PLUG-IN #}
<input id="fileupload" type="file" name="myfile" multiple
       style="display: none;"
       data-url="{% url 'myproject:multi_import' %}"
       data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>

{# 3. TABLE TO DISPLAY THE UPLOADED PHOTOS #}
<table id="gallery" class="table table-bordered">
  <thead>
    <tr>
      <th>Uploaded Files:</th>
    </tr>
  </thead>
  <tbody>
    {% for aFile in filesList %}
      <tr>
        <td><a href="{{ aFile.file.url }}">{{ aFile.file.name }}</a></td>
      </tr>
    {% endfor %}
  </tbody>
</table>

upload_files.js

$(function () {
  /* 1. OPEN THE FILE EXPLORER WINDOW */
  $(".js-upload-files").click(function () {
    $("#fileupload").click();
  });

  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
  $("#fileupload").fileupload({
    dataType: 'json',
    done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
      if (data.result.is_valid) {
        $("#gallery tbody").prepend(
          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
        )
      }
    }
  });

});

Проблемы на данный момент: 1. Загрузка не работает при нажатии на кнопку.Появляется окно, я могу выбрать множество файлов и «загрузить» на страницу, то есть он говорит, 2 файла выбраны.Но затем, нажав «Загрузить», выдается ошибка:

{"is_valid": false}

Это происходит из представления (mulit_uploade.py), но я немного запутался, почему

Я хотел бы использовать base.html, который также использовался для функции одиночной загрузки.Поэтому, когда я добавляю {% extends "myproject/base.html" %} к multi_upload.html, появляется новая проблема, которая не появляется, когда я просто использую функцию одиночной загрузки:

Реверс для myproject_about не найден.«myproject_about» не является допустимой функцией представления или именем шаблона:

Узнать больше "

NoReverseMatch в / myproject / import /

Reverse for 'myproject_about 'не найден.' myproject_about 'не является допустимой функцией представления или именем шаблона

Answer 1

Для начала вам понадобится набор форм (https://docs.djangoproject.com/en/2.1/topics/forms/formsets/),, чтобы иметь возможность загружать несколько файлов одновременно. Таким образом, код будет выглядеть примерно так

{% for form in formset %}
    <input type="file" name="{{form.name}}" id="{{form.id_for_label}}" />
    {{form.file.errors}}
{% endfor %}

Теперь у каждого файла будет уникальный идентификатор, как вы увидите при использовании formset. чтобы заполнить данные в таблице, вам необходимо прослушать событие изменения файла и изменить таблицу.

<td data-name="fileUniqueId1"></td>
<td data-name="fileUniqueId2"></td>
<td data-name="fileUniqueId3"></td>

$("form input[type='file']").change(function(e){
    var fileId = e.target.id;
    $("table td[data-name='"+ fileId +"']").text(e.target.files[0].name);
});