目录
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
上传完成后会消失
