当使用ajax发起请求时,使用ajaxStart进行监听,设置加载图片显示
当ajax请求完成时,使用ajaxStop进行监听,设置加载图片隐藏
<img src="../../images/loading.gif" alt="" style="display: none;" id="loading">
<script>
// 监听ajax请求发起
$(document).ajaxStart(function () {
$("#loading").show()
})
// 监听到ajax完成的事件
$(document).ajaxStop(function () {
$("#loading").hide()
})
$("#btnUpload").on("click", function () {
// 1. 将jquery对象转为 DOM 对象,
var files = $("#file1")[0].files
var fd = new FormData()
fd.append("avatar", files[0])
// 发起jquery的ajax请求,上传文件
$.ajax({
method: "POST",
url: "http://www.liulongbin.top:3006/api/upload/avatar",
data: fd,
processData: false,
contentType: false,
success: function (res) {
console.log(res);
}
})
})
</script>