如何解决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 举报,一经查实,本站将立刻删除。