XMLHttpRequest 2.0 - 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我们可以实现文件的上传
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>
案例:
<!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>
