jQuery的高级用法

迈不过友情╰ 2024-04-01 18:44 118阅读 0赞

#### 文章目录 ####

*  使用jQuery完成文件的上传

--------------------

## 使用jQuery完成文件的上传 ##

![在这里插入图片描述][5e8cb1ffce9b4aa0bc1510ad77f89929.png]

> ☀️

![在这里插入图片描述][422c061c0a314ddfb8c9de7b4961f469.png]

> ☀️

![在这里插入图片描述][28636614a86945a5bce9c84c826f76ad.png]

> ☀️

![在这里插入图片描述][96e630011a974273b148af9ef08db47e.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/jquery.js"></script>
    </head>
    
    <body>
    
      <input type="file" id="file1" />
      <button id="btnUpload">上传文件</button>
    
      <br />
      <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />
    
      <script>
        $(function () {
        
          // 监听到Ajax请求被发起了
          $(document).ajaxStart(function () {
        
            $('#loading').show()
          })
    
          // 监听到 Ajax 完成的事件
          $(document).ajaxStop(function () {
        
            $('#loading').hide()
          })
    
          $('#btnUpload').on('click', function () {
        
            var files = $('#file1')[0].files
            if (files.length <= 0) {
        
              return alert('请选择文件后再上传！')
            }
    
            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>
    
    </body>
    
    </html>

> ☀️

`jQuery实现loading效果`

![在这里插入图片描述][5a279f79fa424468a8fc0b383192091a.png]

> ☀️

![在这里插入图片描述][94490e8b5c9f4140967324e1e6174b2a.png]

[5e8cb1ffce9b4aa0bc1510ad77f89929.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fe2a7138f143424086ae2d7572cee604.png
[422c061c0a314ddfb8c9de7b4961f469.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fdc33ca1f59b4686b6ec5c4beda77265.png
[28636614a86945a5bce9c84c826f76ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cb6442ebb85b4f9e9b946828bb851344.png
[96e630011a974273b148af9ef08db47e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/985f1b40e7c14b82881acbddb9d0ff11.png
[5a279f79fa424468a8fc0b383192091a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/20f8e227612d41f3a34737353befbe9f.png
[94490e8b5c9f4140967324e1e6174b2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ae2b32bc135a484d94b7c3d4aca9082a.png