1

複数ファイルのアップロード機能をサイトに実装したいと考えています。サイトにはすでにアップロード機能がありますが、単一ファイル用です。Simple Is Better Than Complex: Django Multiple Files Upload Using Ajax を大まかにフォローしています。

私のコード:

ビュー->mlit_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)

フォーム.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) から来ていますが、なぜか少し混乱しています

  1. base.htmlシングルアップロード機能でも使っていたを使いたいです。に追加{% extends "myproject/base.html" %}するとmulti_upload.html、単一のアップロード機能を使用しただけでは発生しない新しい問題が発生します。

    「myproject_about」のリバースが見つかりません。「myproject_about」は有効なビュー関数またはパターン名ではありません:

    もっと詳しく知る "

    /myproject/import/ の NoReverseMatch

    「myproject_about」のリバースが見つかりません。「myproject_about」は有効なビュー関数またはパターン名ではありません

4

1 に答える 1