✍️ 作者简介: 客户管理系统开发定制前端新手学习中。
💂 作者主页: 客户管理系统开发定制作者主页查看更多前端教学
🎓 专栏分享：
在这里看
文章目录
JQuery实现文件上传提交
定义UI结构
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> <input type="file" id="file1"> <button id="btnUpload">上传文件</button> <img src="" alt="" style="width: 200px;" id="img1">- 1
- 2
- 3
- 4
- 5
验证是否选择了文件
$('#btnUpload').on('click', function () { let files = $('#file1')[0].files; if (files.length <= 0) { return alert('请选择文件后在上传') } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
向中追加文件并发起ajax请求
//上传文件 let fd = new FormData(); fd.append('avator', 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) { alert('上传成功') $('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url) console.log(res.url); } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
jquery实现loading效果
ajaxStart（callback）
开始时，执行ajaxStart函数，可以在ajaxStart的callback中显示loading效果。
自jqueyr版本1.8起，该方法只能被附加到文档，$(document).ajaxStart()函数会监听文档内所有ajax请求,当ajax请求开始会触发这个函数，ajax结束则会触发ajaxStop
<img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px"> $(document).ajaxStart(function () { $('#loading').show() }) $(document).ajaxStop(function () { $('#loading').hide() })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
完整代码
<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> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script></head><body> <input type="file" id="file1"> <button id="btnUpload">上传文件</button> <br> <img src="" alt="" style="width: 200px;" id="img1"> <img src="./自媒体资源/5-121204193933-51.gif" alt="" style="display: none;" id="loading" width="50px" height="50px"> <script> //监听传输 $(document).ajaxStart(function () { $('#loading').show() }) $(document).ajaxStop(function () { $('#loading').hide() }) //建立单击事件 $('#btnUpload').on('click', function () { let files = $('#file1')[0].files; if (files.length <= 0) { return alert('请选择文件后在上传') } //上传文件 let fd = new FormData(); fd.append('avator', 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) { alert('上传成功') $('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url) console.log(res.url); } }) }) </script></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50