# POST四種提交
## 使用原生js進行文件和數據同時上傳
使用 `multipart/form-data`
```html
<form id="forms" name="forms">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="姓名">
</div>
<div class="form-group">
<label for="age">年齡：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="年齡">
</div>
<div class="form-group">
<label for="files">文件：</label>
<input type="file" id="files" name="files">
</div>
</form>
```
js文件內容
```js
document.getElementById("btn").addEventListener('click', function() {
var formlist = new FormData(document.getElementById('forms'));
formlist.append('id', "123456789");
var xmlhttp = null;
if(window.XMLHttpRequest) { // code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) { // code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = state_Change;
xmlhttp.open("POST", "http://localhost:3001/upload", false);
xmlhttp.send(formlist);
function state_Change() {
if(xmlhttp.readyState == 4) { // 4 = "loaded"
if(xmlhttp.status == 200) { // 200 = OK
console.log(xmlhttp)
} else {
alert("Problem retrieving XML data");
}
}
}
}, false)
```
后端nodejs
```js
const http = require('http');
const multiparty = require('multiparty');
http.createServer(function(requset,response){
if(requset.url=="/upload" && requset.method=="POST"){
var form = new multiparty.Form();
form.uploadDir = __dirname + "/uploads";
form.parse(req, function (err, fields, files) {
console.log(err);
console.log("field", fields)
console.log("files", files)
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end("jieshu");
})
}else{
response.writeHead(200, { 'Content-Type': 'text/plain' });
response.end("adw")
}
}).listen(3001)
```
結果輸出
```
null
field { name: [ 'go語言學習' ], age: [ '123' ], id: [ '123456789' ] }
files { files:
[ { fieldName: 'files',
originalFilename: '238.jpg',
path: 'E:\\github-spiritling-cn\\four-post\\web\\uploads\\J3QJXHBJtkVclyf1nUvSEAAz.jpg',
headers: [Object],
size: 184359 } ] }
```
## 使用 axios + nodejs（express,multiparty）
html文件
```html
<form id="forms" name="forms">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="姓名">
</div>
<div class="form-group">
<label for="age">年齡：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="年齡">
</div>
<div class="form-group">
<label for="files">文件：</label>
<input type="file" id="files" name="files" multiple="multiple">
</div>
</form>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
```
js 文件內容
```js
document.getElementById("btn").addEventListener('click', function() {
var formlist = new FormData(document.getElementById('forms'));
formlist.append('id', '123456');
var config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
axios.post('http://localhost:3001/upload', formlist, config).then((response) => { //這里的/xapi/upimage為接口
console.log(response.data);
})
}, false)
```
nodejs
```js
app.post("/upload", function (req, res, next) {
var form = new multiparty.Form();
form.uploadDir = __dirname + "/uploads";
form.parse(req, function (err, fields, files) {
console.log(err);
console.log("field", fields)
console.log("files", files)
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end("jieshu");
})
})
```
輸出
```
null
field { name: [ 'javascript學習' ], age: [ '123' ], id: [ '123456' ] }
files { files:
[ { fieldName: 'files',
originalFilename: '59ad08a2Na74e4d54.jpg',
path: 'E:\\github-spiritling-cn\\four-post\\web\\uploads\\4l0hsbfEIAxVHGVW1XS7LrfS.jpg',
headers: [Object],
size: 48786 },
{ fieldName: 'files',
originalFilename: '238.jpg',
path: 'E:\\github-spiritling-cn\\four-post\\web\\uploads\\2vdXEgkAbKPpvyJ6ppNnlqYG.jpg',
headers: [Object],
size: 184359 } ] }
```
