内容：
1.FormData
2.cors
3.Ajax对象的upload
Ajax基础：https://www.cnblogs.com/wyb666/p/9387488.html
1.FormData
(1)什么是FormData
FormData 对象的使用：
用一些键值对来模拟一系列表单控件：把form中所有表单元素的name与value组装成一个queryString异步上传二进制文件
FormData主要用于上传文件
创建FormData对象：
1 let formData = new FormData()
(2)FormData的方法
1 set(key, value) 会覆盖 2 append(key, value) 不覆盖 3 get(key) 4 getAll(key) 5 delete(key) 6 forEach
方法使用实例：
1 let data=new FormData() 2 data.set('user', 'wyb') 3 console.log(data.get('user')) // wyb 4 data.append('user', 'wyb_test') 5 console.log(data.getAll('user')) // ["wyb", "wyb_test"]
(3)FormData使用实例
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>登陆页面</title> 8 <script> 9 let $ = function (sel) { 10 return document.querySelector(sel) 11 } 12 13 window.onload = function () { 14 let oUser = $('#user') 15 let oPass = $('#pass') 16 let oBtn = $('#btn1') 17 18 oBtn.onclick = function () { 19 let data = new FormData 20 data.set("user", oUser.value) 21 data.set("pass", oPass.value) 22 23 // Ajax: 24 let oAjax = new XMLHttpRequest() 25 26 // GET 27 /* 28 let arr = [] 29 data.forEach(function (value, key) { 30 // console.log(key, value) 31 arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`) 32 }) 33 oAjax.open('GET', `http://localhost:8080/api?${arr.join("&")}`, true) 34 oAjax.send() 35 */ 36 37 // POST 38 oAjax.open('GET', 'http://localhost:8080/api', true) 39 oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 40 oAjax.send(data) 41 42 oAjax.onreadystatechange = function () { 43 if(oAjax.readyState === 4){ 44 if(oAjax>=200 && oAjax.status<300 || oAjax.status === 304){ 45 alert('成功') 46 } else{ 47 alert('失败') 48 } 49 } 50 } 51 52 } 53 54 } 55 56 </script> 57 </head> 58 <body> 59 60 <input type="text" id="user"> 61 <input type="password" id="pass"> 62 <input type="button" value="提交" id="btn1"> 63 64 </body> 65 </html>
(4)FormData上传文件实例
前端：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>上传文件</title> 8 <script> 9 let $ = function (sel) { 10 return document.querySelector(sel) 11 } 12 13 window.onload = function () { 14 let oFile = $('#f1') 15 let oBtn = $('#btn1') 16 17 oBtn.onclick = function () { 18 let data = new FormData() 19 // 拼接文件数据 20 Array.from(oFile.files).forEach(function (file) { 21 data.append("f1", file) 22 }) 23 24 // Ajax: 25 let oAjax = new XMLHttpRequest() 26 27 // POST 28 oAjax.open('POST', 'http://localhost:8080/api', true) 29 oAjax.send(data) 30 31 oAjax.onreadystatechange = function () { 32 if(oAjax.readyState === 4){ 33 if(oAjax>=200 && oAjax.status<300 || oAjax.status === 304){ 34 alert('成功') 35 } else{ 36 alert('失败') 37 } 38 } 39 } 40 41 } 42 43 } 44 45 </script> 46 </head> 47 <body> 48 49 <!-- 可以同时上传多个文件 --> 50 上传文件: <input type="file" id="f1" multiple> 51 <input type="button" value="提交" id="btn1"> 52 53 </body> 54 </html>
后端(express)：
1 const express = require('express') // express主体 2 const body = require('body-parser') // 接收普通POST数据 3 const multer = require('multer') // 接收文件POST数据 4 5 // create server: 6 let server = express() 7 server.listen(8080) 8 9 // 中间件: 10 server.use(body.urlencoded({extended: false})) 11 let multerObj = multer({dest: './upload/'}) 12 server.use(multerObj.any()) 13 14 // 处理请求: -> RESTful风格 15 server.post('/api', function (req, res) { 16 if(req.headers['origin']==='null' || req.headers['origin'].startsWith('http://localhost')){ 17 res.setHeader('Access-Control-Allow-Origin', '*'); 18 } 19 20 res.send("test get") 21 22 console.log(req.body); // 普通POST数据 23 console.log(req.files); // 文件POST数据 24 }) 25 26 // 设置静态文件路径 27 server.use(express.static('./www/'))
启动服务端后在浏览器输入http://localhost:8080/xxx.html即可访问存储在www文件夹下的文件，然后在此页面中上传文件
2.cors
(1)什么是跨域
跨域解释：浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了
同源策略：请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同
跨域：在网络中不存在跨域这回事儿——跨域只是浏览器对我们的限制
想实现跨域就要在服务器端进行设置，设置Access-Control-Allow-Origin
(2)Access-Control-Allow-Origin
使用方法：Access-Control-Allow-Origin: 域名||*
注：指定某个域名后就可以允许这个通过这个域名来访问，指定*表示允许一切的访问
- Server：验证headers['origin']认不认识，如果认识=>setHeader('Access-Control-Allow-Origin', '*')
- Client：不需要做任何事
3.Ajax对象的upload
(1)使用方法
1 oAjax.upload.onprogress=function (ev){ // oAjax是Ajax对象 2 ev.loaded 完成 3 ev.total 总共 4 5 ev.loaded/ev.total =>0~1 6 }; 7 8 // 注意: 9 1.upload必须放在Ajax对象创建之后、send之前 10 2.以前的上传——POST 11 加了upload——OPTIONS、POST 12 3.服务器必须能处理OPTIONS 13 通用服务器——不用担心 14 NodeJS服务——use 15 4.oAjax.onprogress 下载进度 16 oAjax.upload.onprogress 上传进度
(2)用upload实现上传进度实例
HTML：
1 <!-- 可以同时上传多个文件 --> 2 <div> 3 上传文件: <input type="file" id="f1" multiple> 4 <input type="button" value="提交" id="btn1"> 5 </div> 6 <!--上传进度: <meter id="m1" value="" min="0" max="100" style=" 500px;"></meter>--> 7 上传进度: 8 <div class="parent"> 9 <div class="child"> 10 11 </div> 12 </div>
CSS：
1 .parent { 2 width: 500px; 3 height: 20px; 4 border: 1px solid black; 5 } 6 7 .child { 8 width: 0; 9 height: 100%; 10 background: green; 11 }
JavaScript：
1 let $ = function (sel) { 2 return document.querySelector(sel) 3 } 4 5 window.onload = function () { 6 let oFile = $('#f1') 7 let oBtn = $('#btn1') 8 9 oBtn.onclick = function () { 10 let data = new FormData() 11 // 拼接文件数据 12 Array.from(oFile.files).forEach(function (file) { 13 data.append("f1", file) 14 }) 15 16 // Ajax: 17 let oAjax = new XMLHttpRequest() 18 19 oAjax.upload.addEventListener('progress', function (ev) { 20 alert('progress') 21 console.log(ev) 22 23 // 计算进度 24 let v = 100 * ev.loaded / ev.total + '%' 25 let oChild = document.getElementsByClassName('child')[0]; 26 27 // 设置进度 28 oChild.style.width = v; 29 }, false); 30 31 // POST 32 oAjax.open('POST', 'http://localhost:8080/api', true) 33 oAjax.send(data) 34 } 35 }