目录
1 上传文件
2 loading效果
1 上传文件
后端接到数据后保存在upload_file文件夹下
前端依然使用FormData处理文件
contentType:false的意思是 使用FormData默认的Content-Type值
processData:false的意思是 不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
2 loading效果
需要先搞一个这样的gif
让其在上传开始时显示，其余时间不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display:none;
width:200px;
height:200px;
}
</style>
</head>
<body>
<input type="file">
<button>上传文件</button>
<img src="loading.gif" alt="">
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>
$(document).ajaxStart(function() {
$('img').show()
})
$(document).ajaxStop(function() {
$('img').hide()
})
$('button').on('click',function() {
files = $('input')[0].files
if (files.length <= 0) {
return alert('请选择要上传的文件')
}
FormData_obj = new FormData()
FormData_obj.append('file',files[0])
$.ajax({
type:'POST',
url:'http://127.0.0.1:5000/upload',
data:FormData_obj,
contentType:false,
processData:false,
success:function(res) {
console.log(res)
}
})
})
</script>
</html>Ajax请求开始时会执行ajaxStart()，自jQuery1.8后，ajaxstart()只能给document，因为只能给document所以ajaxStart会监听当前document内所有的Ajax请求
Ajax请求结束时会执行ajaxStop()
除此之外还有很多请求的方法，详细可以看一下文档 jQuery 参考手册 - Ajax
上传过程中会显示loading.gif
上传完成后会消失
