欢迎光临
我的个人博客网站

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) 打赏
未经允许不得转载:张拓的天空 » XMLHttpRequest 2.0 – FormData
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏