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>
经验首页