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>
赞 (0)