ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

XHR Level2的新特性

2022-05-03 09:33:00  阅读：168  来源： 互联网

标签：files 文件 xhr btnUpload 特性 XHR Level2 var 上传


一、了解

1.旧版XMLHttpRequest的缺点

只支持文本数据的传输，无法用来读取和上传文件

传送和接收数据时，没有进度信息，只能提示有没有完成

2.XMLHttpRequest Level2的新功能

可以设置HTTP请求的时限

可以使用FormData对象管理表单数据

可以上传文件

可以获得数据传输的进度信息

二、设置HTTP请求时限（最后整体代码放在下面）

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限:

 

 

 上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数:

 

 

 代码示例：

<!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>
</head>

<body>

</body>
<script>
    var xhr = new XMLHttpRequest()

    // 设置超时时间
    xhr.timeout = 3000
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
        console.log('请求超时');
    }

    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
</script>

</html>

三、FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTMLS新增了一个FormData对象，可以模拟表单操作:

 

 

 代码示例：

<!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>
</head>

<body>

</body>
<script>
    //  1.创建formData实例
    var fd = new FormData()
    // 2.调用append函数，向fd中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')
    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText));
        }
    }
</script>

</html>

FormData对象也可以用来获取网页表单的值，示例代码如下:

 

 

 示例代码:

<!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>
</head>

<body>
    <form id="from1">
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="upwd">
        <button type="submit">提交</button>
    </form>
</body>
<script>
    // 1，通过DOM操作，获取到form表单元素
    var form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
        // 阻止默认提交行为
        e.preventDefault()

        // 创建FormData，快速获取到 form表单中的数据
        var fd = new FromData(form)

        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
        xhr.send(fd)

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.statusText));
            }
        }
    })
</script>

</html>

四、上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

实现步骤:

　1.定义UI结构

　2.验证是否选择了文件

　3.向FormData中追加文件

　4.使用xhr 发起上传文件的请求

　5.监听onreadystatechange事件

定义UI结构:

 

 

 示例代码：

<!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>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>

</html>

2.验证是否选择了文件

 

 

 代码示例：

<!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>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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('请选择要上传的文件！')
        }
        console.log('用户选择了待上传的文件');
    })
</script>

</html>

3.向FormData中追加文件

示例代码：

<!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>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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])
    })
</script>

</html>

 

4.使用xhr发起上传文件的请求

 

 

 示例代码：

<!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>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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)
    })
</script>

</html>

5.监听onreadystatechange事件

示例代码：

<!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>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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>

</html>

五、显示文件上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度.

示例代码：

<!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>
    <link rel="stylesheet" href="/js文件/bootstrap.css">
    <script src="/js文件/jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <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 />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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.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>

</html>

4.监听上传完成的事件

 

 

 整体代码：

<!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>
    <link rel="stylesheet" href="/js文件/bootstrap.css">
    <script src="/js文件/jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <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 />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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>

</html>

 

标签：files,文件,xhr,btnUpload,特性,XHR,Level2,var,上传
来源： https://www.cnblogs.com/lxr0606/p/16216455.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有