FromData对象用以将数据成键值对,使用XMLHttpRequest来发送数据。其主要用于发送表单数据,亦可用于发送带键值对的数据。使用FromData()构造函数可创建一个新的FromData对象。
语法
// var formdata = new FormData() 创建一个空的formdata对象 var form = document.getElementById('forms') var formdata = new FormData(form)
参数
from
一个HTML中的表单元素
方法
append(key, value, [filename])
向formdata对象中添加一个键值对,如果该键存在则会将新的值赋值给该键,否则会添加一个新的键值对。
delete(key)
从FormData对象中删除指定的key和它对应的值
entries()
返回一个可迭代的对象
get(key)
用于获取formdata对象中和指定键关联的第一个值
getAll(key)
用于获取formdata对象中和指定键关联的所有值
has(key)
用于查看formdata对象中是否含有某个键
keys()
返回一个迭代器,遍历formdata对象中包含的所有键
set(key,value)
对formdata对象里的键设置新的值,如果不存在则添加一个新的键值对
values()
返回一个迭代器,遍历formdata对象中包含的所有值
使用FormData上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" name="name" value="1234"> <input type="text" name="pwd" value="5678"> <input type="file" name="file" id="file" onchange="change()"> <input type="button" value="提交" onclick="submit()"> <script> var file = document.getElementById('file'); var formdata = new FormData(); function change(){ formdata.append('file', file.files[0]); formdata.append('name', '1234'); formdata.append('files', '5678'); } function submit(){ console.log('submit') var http = new XMLHttpRequest(); http.open('POST', '/file', true); http.onload = function(res) { console.log(res) }; http.send(formdata) } </script> </body> </html>
var express = require('express'); var path = require('path'); var bodyParser = require('body-parser'); var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); var app = new express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})) app.use(express.static('statics')) app.get('/', function(req, res){ res.sendFile(path.resolve('./views/hello.html')) }); app.post('/file',multipartMiddleware, function(req, res){ console.log(req.body, req.files) /* { name: '1234', files: '5678' } { file:{ fieldName: 'file', originalFilename: '985065c10b196d4fdbd7311795c7b57f.gif', path: 'C:\\Users\\pyh\\AppData\\Local\\Temp\\gIAGofhbYBfXM1IXGf-8N_eO.gif', headers: { 'content-disposition': 'form-data; name="file"; filename="985065c10b196d4fdbd7311795c7b57f.gif"', 'content-type': 'image/gif' }, size: 762277, name: '985065c10b196d4fdbd7311795c7b57f.gif', type: 'image/gif' } } */ }); app.listen(9000, function(){ console.log('server is runing') });