FormData對象的作用
1、模擬HTML表單，相當於將HTML表單映射成表單對象，自動將表單對象中的數據拼接成請求參數的格式。
2、異步上傳二進制文件。
FormData 對象的使用
1、准備HTML表單
<form id="form">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="button"/>
</form>
2、將JHTML 表單轉化為formData 對象
<script type="text/javascript">
var form=document.getElementById('form');
var formData=new FormData(form);
</script>
3、提交表單對象
<script type="text/javascript">
xhr.send(formData);
</script>
//formData對象不能用於get請求
.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>05FormData對象的使用方法.html</title> 6 </head> 7 <body> 8 <!-- 創建普通的html表單 --> 9 <form id="form"> 10 <input type="text" name="username"> 11 <input type="password" name="password"> 12 <input type="button" id="btnOk" value="提交"> 13 </form> 14 15 <script type="text/javascript"> 16 //獲取按鈕 17 var btn=document.getElementById('btnOk'); 18 //獲取表單 19 var form=document.getElementById('form'); 20 //為按鈕添加點擊事件 21 btn.onclick = function(){ 22 //將普通的html表單轉換為表單對象 23 var formData= new FormData(form); 24 //提交表單對象 25 var xhr=new XMLHttpRequest(); 26 xhr.open('post','http://localhost:3000/formData'); 27 xhr.send(formData); 28 xhr.onload=function(){ 29 if(xhr.status==200){ 30 console.log(xhr.responseText); 31 } 32 } 33 } 34 </script> 35 </body> 36 </html>
app.js
1 const express=require('express') 2 const path=require('path') 3 const formidable=require('formidable'); 4 const app=express(); 5 app.use(express.static(path.join(__dirname,'public'))) 6 app.post('/formData',(req,res)=>{ 7 //創建formidable表單解析對象 8 const form=new formidable.IncomingForm(); 9 //解析客戶端傳遞過來的FormData對象 10 form.parse(req,(err,fields,files)=>{ 11 res.send(fields); 12 }) 13 }) 14 app.listen(3000) 15 console.log('服務器啟動成功')
運行結果：
