XMLHttpRequest 2.0 - FormData

 

FormData :

a) 提供了一个新的内建对象,可用于管理表单数据

b) 首先要获取一个表单元素form

c) 然后在实例化时 new FormData(form),将表单元素form传进去

d) 会返回一个对象,此对象可以直接做为xhr.send(formData)的参数

e) 此时我们的数据就是以二进制形式传递了

f) 注意我们这里只能以post形式传递

案例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>14-使用formdata收集数据实现用户注册</title>
 8 </head>
 9 
10 <body>
11     <form action="" class="myform">
12         用户名:<input type="text" name='username' class="uname"> <br>
13         密码:<input type="text" name="password" class="upass"> <br>
14         手机号码:<input type="text" name="phone" class="uphone"> <br>
15         <input type="button" value="注册" class="btn">
16     </form>
17 
18     <script>
19         document.querySelector('.btn').onclick = function () {
20             // 1.创建异步对象
21             var xhr = new XMLHttpRequest()
22             // 使用formdata收集用户数据
23             // 获取表单
24             var myform = document.querySelector(".myform")
25             // 将表单做为参数传递,在创建formData对象的时候
26             var formdata = new FormData(myform)
27             // 2.发送请求
28             // 2.1  设置请求行
29             xhr.open('post', 'http://127.0.0.1:3002/addUser')
30             // 2.2 设置请求头,这里特别要注意,使用formdata不能设置请求头,否则会报错,因为formdata内部会进行数据参数的处理
31             // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
32             // 2.3 设置请求体
33             // 生成的formData对象就可以直接做为异步对象的参数传递
34             xhr.send(formdata);
35 
36             // 接收响应并处理
37             xhr.onload = function () {
38                 console.log(xhr.response)
39             }
40         }
41     </script>
42 </body>
43 </html>

 

FormData   文件上传数据获取 :

a) 我们上传文件是以二进制形式传递的

b) 我们可以通过表单<input type="file">获取到一个文件对象

c) 然后file.files[0]可以获取文件信息

d) 然后再利用var formData = new FormData() 实例化

e) 然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制

f) 最后将 formData 做为xhr.send(formData)的参数

上传进度

a) 利用XMLHttpRequest我们可以实现文件的上传

b) 并且我们可以通过xhr.upload.onprogress = function (ev) {// code},监听上传的进度

c) 这时我们上传的进度信息会保存在事件对象ev里

d) ev.loaded 表示已上传的大小,ev.total表示文件整体的大小

e) var percent = ev.loaded / ev.total

 

案例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>15-使用formdata实现文件上传</title>
 8     <style>
 9         div {
10             height: 100px;
11             width: 100px;
12             background-color: #eee;
13         }
14     </style>
15 </head>
16 
17 <body>
18     <form action="">
19         <input type="file" name="img" id="img" class="myimg"> <br>
20         <img src="" alt="" class="myphoto">
21         <div></div>
22         <input type="button" value="单击上传文件" class="btn">
23     </form>
24 
25     <script>
26         // onchange:用户一选择文件就进行触发
27         document.querySelector('#img').onchange = function () {
28             var xhr = new XMLHttpRequest()
29 
30             // 通过formdata收集图片数据,只是想收集图片数据,所以不用传入表单
31             var formdata = new FormData()
32             // 获取file表单元素中所选择的文件对象--不是文件名称,而是文件数据
33             // files:当前file表单元素中所有选择的图片列表,它是一个伪数组
34             // 这里使用[0]是因为我们就选择一张图片
35             var myfile = document.querySelector('#img').files[0]
36             // 一个很重要的方法:append,它可以让我们在formdata中追加参数:append(key,value),value可以是任意格式
37             // blob:binary large object:就是指资源文件,就是文件对象
38             formdata.append('img', myfile)
39 
40             // 发送请求
41             // var xhr = new XMLHttpRequest()
42             xhr.open('post', 'http://127.0.0.1:3002/uploadFile')
43 
44             // 监听文件上传进度
45             xhr.upload.onprogress = function (event) {
46                 console.log(event)
47                 var pecent = event.loaded / event.total * 100 + '%'
48                 document.querySelector('div').style.width = pecent
49             }
50 
51             // 注意不用自己来设置请求头,况且如果自己设置了反而会出错--请求不再发送
52             // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
53             xhr.send(formdata)
54 
55             xhr.onload = function () {
56                 if (xhr.status == 200) {
57                     var result = JSON.parse(xhr.responseText)
58                     if (result.code == 200) {
59                         // 实现图片预览
60                         document.querySelector('.myphoto').src = 'http://127.0.0.1:3002/images/' + result.img
61                     }
62                 }
63             }
64 
65         }
66     </script>
67 </body>
68 </html>

 

ajax结合formdata实现文件上传

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 0%;
            background-color: #eee;
        }
        .myphoto {
            height: 100px;
            width: 100px;
            display: block;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="file" name="img" id="img"> <br>
        <img src="" alt="" class="myphoto">
        <input type="button" value="单击上传文件" class="btn">
        <div></div>
    </form>
    <script src="./js/jquery.min.js"></script>
    <script>
        //使用jQuery中的ajax
        $('#img').on('change',function(){
            var formdata = new FormData()
            var myfile = document.querySelector('#img').files[0]
            formdata.append('img', myfile)
            $.ajax({
                type:'post',
                url:'http://127.0.0.1:3002/uploadFile',
                data:formdata,
                dataType:'json',
                processData:false,
                contentType:false,
                success:function(res){
                    if (res.code == 200) {
                        // 实现图片预览
                        $('.myphoto').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
                    }
                }

            })
        })
    </script>
</body>
</html>

 

 

 

posted @ 2020-11-26 21:01  南城北斋  阅读(560)  评论(0编辑  收藏  举报