XMLHttpRequest Level2的新特性

Bertha 。 2024-04-01 18:44 87阅读 0赞

#### XMLHttpRequest Level2的新特性 ####

*  认识XMLHttpRequest Level2

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

## 认识XMLHttpRequest Level2 ##

![在这里插入图片描述][1c423a7c931445cebe820265e2773e7e.png]

> ☀️

![在这里插入图片描述][289b86d74fc3432fbc5e27cd59085bca.png]

> ☀️

![在这里插入图片描述][8d1be047e178426ea6a234d634e4b4e6.png]

> ☀️

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

`使用FormData快速获取表单中的数据`

> ☀️

![在这里插入图片描述][00295153646f4e5a9cc918ff71fe8ada.png]

<input type="file" id="file1" />
      
      <button id="btnUpload">上传文件</button>
      <br />
      
      <img src="" alt="" id="img" width="1200" height="800" />
    
      <script>
        // 1. 获取到文件上传按钮
        var btnUpload = document.querySelector('#btnUpload')
        // 2. 为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function () {
        
          // 3. 获取到用户选择的文件列表
          var files = document.querySelector('#file1').files
          if (files.length <= 0) {
        
            return alert('请选择要上传的文件！')
          }
          var fd = new FormData()
          // 将用户选择的文件，添加到 FormData 中
          fd.append('avatar', files[0])
    
          var xhr = new XMLHttpRequest()
          xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
          xhr.send(fd)
    
          xhr.onreadystatechange = function () {
        
            if (xhr.readyState === 4 && xhr.status === 200) {
        
              var data = JSON.parse(xhr.responseText)
              if (data.status === 200) {
        
                // 上传成功
                document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
              } else {
        
                // 上传失败
                console.log('图片上传失败！' + data.message)
              }
            }
          }
        })
      </script>

> ☀️  
> ![在这里插入图片描述][0d3958c8951244169638b84eb57d1de3.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>
      <link rel="stylesheet" href="./lib/bootstrap.css" />
      <script src="./lib/jquery.js"></script>
    </head>
    
    <body>
      
      <input type="file" id="file1" />
      
      <button id="btnUpload">上传文件</button>
    
      
      <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
          0%
        </div>
      </div>
    
      <br />
      
      <img src="" alt="" id="img" width="800" />
    
      <script>
        // 1. 获取到文件上传按钮
        var btnUpload = document.querySelector('#btnUpload')
        // 2. 为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function () {
        
          // 3. 获取到用户选择的文件列表
          var files = document.querySelector('#file1').files
          if (files.length <= 0) {
        
            return alert('请选择要上传的文件！')
          }
          var fd = new FormData()
          // 将用户选择的文件，添加到 FormData 中
          fd.append('avatar', files[0])
    
          var xhr = new XMLHttpRequest()
    
          // 监听文件上传的进度
          xhr.upload.onprogress = function (e) {
        
            if (e.lengthComputable) {
        
              // 计算出上传的进度
              var procentComplete = Math.ceil((e.loaded / e.total) * 100)
              console.log(procentComplete)
              // 动态设置进度条
              $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
            }
          }
    
          xhr.upload.onload = function () {
        
            $('#percent').removeClass().addClass('progress-bar progress-bar-success')
          }
    
          xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
          xhr.send(fd)
    
          xhr.onreadystatechange = function () {
        
            if (xhr.readyState === 4 && xhr.status === 200) {
        
              var data = JSON.parse(xhr.responseText)
              if (data.status === 200) {
        
                // 上传成功
                document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
              } else {
        
                // 上传失败
                console.log('图片上传失败！' + data.message)
              }
            }
          }
        })
      </script>
    </body>
    
    </html>

[1c423a7c931445cebe820265e2773e7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f354834f07154471a5f7ceb60f1bd525.png
[289b86d74fc3432fbc5e27cd59085bca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3abcc6e420d84468be1b89cfb96a0e02.png
[8d1be047e178426ea6a234d634e4b4e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5c963adfe0754b71b8938fdc6d3f0df8.png
[f9cf63cfef894da5835936efb20c0902.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d30c55cbea20494996d2e9702f42fbf0.png
[00295153646f4e5a9cc918ff71fe8ada.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e5f7a5337055402094fbd6c18917a329.png
[0d3958c8951244169638b84eb57d1de3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/355f770d5f484a3780e281cfe89397b4.png