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 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', '')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) 利用
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 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 42 xhr.open('post', '')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 = pecent49 }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 = '' + result.img61 }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:'', data:formdata, dataType:'json', processData:false, contentType:false, success:function(res){ if (res.code == 200) { // 实现图片预览 $('.myphoto').attr('src', '' + res.img) } } }) }) </script></body></html>
原文转载：http://www.shaoqun.com/a/493194.html
tchibo：https://www.ikjzd.com/w/1928
anker：https://www.ikjzd.com/w/1027
邮乐网购物商城：https://www.ikjzd.com/w/1776
FormData:a)提供了一个新的内建对象，可用于管理表单数据b)首先要获取一个表单元素formc)然后在实例化时newFormData(form)，将表单元素form传进去d)会返回一个对象，此对象可以直接做为xhr.send(formData)的参数e)此时我们的数据就是以二进制形式传递了f)注意我们这里只能以post形式传递案例:1<!DOCTYPEhtml>2<html
gtin：gtin
e邮包：e邮包
宝付：宝付
口述：妻子向闺蜜分享我房事细节真崩溃：口述：妻子向闺蜜分享我房事细节真崩溃
2020端午中山金斗湾儿童乐园有办什么活动？：2020端午中山金斗湾儿童乐园有办什么活动？
没有评论:
发表评论