1

我想在网站中实现多文件上传功能。该网站上已经有上传功能，但适用于单个文件。我松散地遵循简单优于复杂：Django Multiple Files Upload Using Ajax。

我的代码：

视图-> 多重上传.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)

模型.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)

表格.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>

上传文件.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），但我有点困惑为什么

  1. 我想使用base.html也用于单次上传功能的那个。因此，当我添加{% extends "myproject/base.html" %}到时multi_upload.html，会出现一个新问题，而我只使用单个上传功能时不会出现：

    未找到“myproject_about”的反向。'myproject_about' 不是有效的视图函数或模式名称：

    学到更多 ”

    /myproject/import/ 处的 NoReverseMatch

    未找到“myproject_about”的反向。“myproject_about”不是有效的视图函数或模式名称

4

1 回答 1

0

首先，您需要一个表单集（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 %}

现在每个文件都会有一些唯一的 id，正如您在使用 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);
});
于 2018-11-19T10:55:15.453 回答