<!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>
background found that file in form is in octet-stream mode. This may result in a non-simple request, right?
read the following description before, thinking that multiple/formdata is a simple request
Preflighted request Preflighted request unlike a simple request, the Preflighted
request first sends an Options request to the server to verify that it has access to the specified service, and then sends the actual request. Preflighted
requests have the following characteristics:XHR uses Preflighted
requests except for GET, HEAD, and POST methods. When you use the POST method to send data to the server, Content-Type also uses a Preflighted
request using an encoding format other than application/x-www-form-urlencoded, multipart/form-data, or text/plain. After using a custom HTTP Headers, the Preflighted request is also used.