js函数将在上传过程后无法运行

问题描述

我知道这是一个愚蠢的问题，但是我似乎无法弄清楚，我是js的新用户，我一直在尝试在我的网站上实施一个教程，以使用js和bootstrap编程上传进度栏 进度栏工作正常，但是在该过程完成后，浏览器应该刷新，但没有执行任何操作 这是我的表格

                <form method="POST" action="." class="needs-validation" enctype='multipart/form-data'>
                {% csrf_token %}
                <div class="c_details_img">
                    <img class="img-fluid" src="{% static 'img/courses/course-details.jpg'%}" alt="">
                </div>
                <div class="shadow-sm p-3 mb-5 mt-4 bg-white rounded">
                    <div id="videoinput" class="">
                        {{form.video}}
                    </div>
                    <div id="progressdiv" class="progress d-none" style="height: 2rem;">
                        <div id="progressbar" class="progress-bar progress-bar-striped progress-bar-animated"
                            role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                            style="width: 0%">0%</div>
                    </div>
                </div>
        </div>
        <div class="col-lg-4">
            <div class="c_details_list shadow-sm p-3 mb-5 bg-white rounded">
                <div class="form-group">
                    <label for="exampleInputEmail1">Title:</label>
                    {{ form.title}}
                    <small id="emailHelp" class="form-text text-muted">(Enter a title that covers the
                        course content comprehensively)</small>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Description:</label>
                    {{ form.description}}
                    <small id="emailHelp" class="form-text text-muted">
                        (Be sure to describe the course content briefly)</small>
                </div>
                <button id="save_btn" style="width: 100%;height: 3rem;" class="main_btn" type="submit">Save the
                    Course</button>
                <button id="loading_btn" style="width: 100%;height: 3rem;" class="btn btn-success d-none"
                    type="button" disabled>Uploading...</button>
                </form>

这是我的uploader.js：

 $(document).ready(function () {
  $("form").on("submit",function (event) {
    event.preventDefault();
    var formData = new FormData($("form")[0]);

    $.ajax({
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress",function (e) {
          if (e.lengthComputable) {
            document.getElementById("loading_btn").classList.remove("d-none");
            document.getElementById("save_btn").classList.add("d-none");
            document.getElementById("videoinput").classList.add("d-none");
            document.getElementById("progressdiv").classList.remove("d-none");

            var percent = Math.round((e.loaded / e.total) * 100);
            
            $("#progressbar")
              .attr("aria-valuenow",percent)
              .css("width",percent + "%")
              .text(percent + " %");
          }

        });
        return xhr;
      },type: "POST",data: formData,processData: false,contentType: false,seccess: function () {
        location.reload();
      },});

  });
  
});

我也尝试了警报功能，并尝试将功能放在其他位置，但似乎无济于事 当进度条达到100％时，它会停在那里，没有其他反应

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）