Обратные вызовы не работают для плагина FileUpload - PullRequest
Новая
       52

Обратные вызовы не работают для плагина FileUpload

0 голосов
/ 30 октября 2019

Поэтому я пытаюсь следовать этому руководству https://simpleisbetterthancomplex.com/tutorial/2016/11/22/django-multiple-file-upload-using-ajax.html, чтобы попытаться реализовать возможности загрузки файлов для моего собственного веб-приложения. Однако, когда я попадаю в раздел «Отображение прогресса», мой модальный вид не отображается. Любая идея, что я делаю неправильно?

(Код вроде как дословно копируется для тестирования)

HTML: 

{% extends 'qqq/main_template.html' %}

{% load static %}
{% block content %}
    <!-- Datatables provided styles and js code -->
    <link href="{% static 'qqq/vendor/datatables/dataTables.min.css' %}" rel="stylesheet">
    <script src="{% static 'qqq/vendor/datatables/dataTables.min.js' %}"></script>

    <!-- Page level custom scripts -->
    <script type="text/javascript" src="{% static 'qqq/js/custom-datatable.js' %}"></script>

    <script src="{% static 'qqq/js/fileUpload/js/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'qqq/js/fileUpload/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'qqq/js/fileUpload/js/jquery.fileupload.js' %}"></script>
    <!-- Maybe need to edit -->
    <script src="{% static 'qqq/js/basic-upload.js' %}"></script>

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Parse & Update</h1>


        <!-- <input type="file" multiple id="fileLoader" name="myfiles" title="Load File" /> 
        <input class="btn btn-primary btn-lg" type="button" id="btnOpenFileDialog" value="Parse & Update" onclick="openfileDialog();" /> -->
       <!--  {# 1. BUTTON TO TRIGGER THE ACTION #} -->
    <div>
        <button type="button" class="btn btn-primary btn-lg js-upload-photos">Parse & Update</button>
        <input id="fileupload" type="file" name="file" multiple
               style="display: none;"
               data-url="{% url 'qqq:parse' %}"
               data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
    </div>


    <table id="gallery" class="table table-bordered">
        <thead>
            <tr>
                <th>Logs</th>
            </tr>
        </thead>
        <tbody>
            {% for log in log_list %}
                <tr>
                    <td><a href="{{ log.file.url }}">{{ log.file.name }}</a></td>
                </tr>
        {% endfor %}
        </tbody>
    </table>    

    <div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Uploading...</h4>
                </div>
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 0%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- /.container-fluid -->
{% endblock content %}

Javascript: 

$(function () {

  $(".js-upload-photos").click(function () {
    $("#fileupload").click();
  });

  $("#fileupload").fileupload({
    dataType: 'json',
    sequentialUploads: true,  
    start: function (e) {  
      $("#modal-progress").modal("show");
    },
    stop: function (e) {  
      $("#modal-progress").modal("hide");
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      var strProgress = progress + "%";
      $(".progress-bar").css({"width": strProgress});
      $(".progress-bar").text(strProgress);
    },
    done: function (e, data) {
      if (data.result.is_valid) {
        $("#gallery tbody").prepend(
          "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
        )
      }
    }

  });

});
...