极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" id="form" name="fileinfo">
<input type="file" name="file" required />
<input type="text" name="key" required />
<input type="text" name="duration" required />
//<input type="submit" value="Stash the file!" />
<button id="send">this</button>
</form>
<div id="status"></div>
</body>
<script>
document.getElementById('send').addEventListener('click', function(ev) {
let xhr = new XMLHttpRequest();
let myForm = document.forms.namedItem("fileinfo");
let data = new FormData(myForm); //将表单数据写入
let progressHandle= function(e){ //进度条
console.log(e);
var done = e.position || e.loaded,
total = e.totalSize || e.total;
var present = Math.floor(done/total*100);
document.getElementById('status').innerHTML = present + '%'
};
xhr.upload.addEventListener("progress",progressHandle,false);
xhr.open("POST", "http://localhost:9000/upload",true);//注意顺序
xhr.send(data);
ev.preventDefault(); //阻止页面跳转
}, false);
</script>
</html>
后台发现form中的file是用octet-stream 模式。。这也许就造成了非简单请求吧？？
之前看的下面这种描述，以为是multiple/formdata就是简单请求了
Preflighted 请求 Preflighted 请求与简单请求不同，Preflighted
请求首先会向服务器发送一个Options请求，以验证是否对指定服务有访问权限，之后再发送实际的请求。Preflighted
请求具有以下特点：除GET、HEAD、POST方法外，XHR都会使用Preflighted
请求。使用POST方法向服务器发送数据时，Content-Type使用application/x-www-form-urlencoded、multipart/form-data或text/plain之外编码格式也会使用Preflighted
请求。 使用了自定义的HTTP Headers后，也会使用Preflighted 请求。
html5
因为你添加了上传的监听。
举个栗子
http://jsfiddle.net/631807682...
Simple_requests