用form標簽
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用戶：<input type="text" name="user" /><br>
密碼：<input type="password" name="pass" /><br>
文件：<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script src="jquery.js" charset="utf-8"></script>
<script>
$('#form1').on('submit', function (){
let formdata=new FormData(this); // 通過這個表單構建FormData
// 發(fā)送ajax請求（jQuery的ajax）
$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false, // 阻止jQuery處理數據
contentType: false // 阻止修改contentType
}).then(res=>{
alert('成功');
}, res=>{
alert('失敗');
});
return false; // 阻止表單自己提交
});
</script>
同時后臺服務器處理提交的數據，用multiparty庫
不用form標簽
<body>
<div id="div1">
用戶：<input type="text" id="user" /><br>
密碼：<input type="password" id="pass" /><br>
文件：<input type="file" id="f1" /><br>
<input id="btn1" type="button" value="提交">
</div>
</body>
<script>
let oBtn=document.querySelector('#btn1');
oBtn.onclick=function (){
// 創(chuàng)建FormData
let formdata=new FormData();
// 給表單添加頁面輸入的值
formdata.append('username', document.querySelector('#user').value);
formdata.append('password', document.querySelector('#pass').value);
formdata.append('f1', document.querySelector('#f1').files[0]);
// 發(fā)送ajax請求（原生的ajax）
let xhr=new XMLHttpRequest();
xhr.open('post', 'http://localhost:8080/', true);
xhr.send(formdata);
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert('成功');
}else{
alert('失敗');
}
}
};
};
</script>
同時后臺服務器處理提交的數據，用multiparty庫
后臺
const http=require('http');
const multiparty=require('multiparty');
http.createServer((req, res)=>{
let form=new multiparty.Form({
uploadDir: './upload/' // 上傳到同級目錄下的upload文件夾
});
form.parse(req);
// 普通數據
form.on('field', (name, value)=>{
console.log('field:', name, value);
});
// 文件數據
form.on('file', (name, file)=>{
console.log('file:', name, file);
});
// 解析結束
form.on('close', ()=>{
console.log('完事兒');
});
}).listen(8080);
