<!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="file"?class="myfile"?/>
????進(jìn)度：<progress?value="0"?max="100"></progress>?<span?class="percent">0%</span>
????速度：<span?class="speed">20b/s</span>
????<button>點(diǎn)擊上傳</button>
????<button>取消上傳</button>
</body>
<script>
????let?xhr?=?new?XMLHttpRequest();
????let?btns?=?document.querySelectorAll("button");
????let?stime;
????let?sloaded;
????btns[0].onclick?=?function?()?{
????????let?file?=?document.querySelector(".myfile").files[0];
????????let?form?=?new?FormData();
????????form.append("myfile",?file);
????????xhr.open("post",?"/fileUpload",?true);
????????xhr.onload?=?function?()?{
????????????console.log(xhr.responseText);
????????}
????????xhr.upload.onloadstart?=?function(){
????????????console.log("開始上傳");
????????????stime?=?new?Date().getTime();
????????????sloaded?=?0;
????????}
????????xhr.upload.onprogress?=?function(evt){
????????????let?endTime?=?new?Date().getTime();
????????????//?時(shí)間差井辜；
????????????let?dTime?=?(endTime?-?stime)/1000;
????????????//?當(dāng)前時(shí)間內(nèi)上傳的文件大小
????????????let?dloaded?=??evt.loaded?-?sloaded;
????????????let?speed?=?dloaded/dTime;
????????????let?unit?=?"b/s";
????????????stime?=?new?Date().getTime();
????????????sloaded?=?evt.loaded;
????????????if(speed/1024>1){
????????????????unit?=?"kb/s";
????????????????speed?=?speed/1024;
????????????}
????????????if(speed/1024>1){
????????????????unit?=?"mb/s";
????????????????speed?=?speed/1024;
????????????}
????????????document.querySelector(".speed").innerHTML?=?speed.toFixed(2)+unit;
????????????//?console.log(speed.toFixed(2));
????????????//?console.log("正在上傳");
????????????//?當(dāng)前文件上傳的大小evt.loaded
????????????//?需要上傳文件的大小
???????????let?percent?=??(evt.loaded/evt.total*100).toFixed(0);
????????//????console.log(percent);
????????????document.querySelector("progress").value?=?percent;
????????????document.querySelector(".percent").innerHTML?=?percent+"%";
????????}
????????xhr.upload.onload?=?function(){
????????????console.log("上傳成功");
????????}
????????xhr.upload.onloadend?=?function(){
????????????console.log("上傳完成");
????????}
????????xhr.upload.onabort?=?function(){
????????????console.log("取消上傳");
????????}
????????xhr.send(form);
????}
????btns[1].onclick?=?function(){
????????xhr.abort();
????}
</script>
</html>
const?Koa?=?require("koa");
const?static?=?require("koa-static");
const?Router?=?require("koa-router");
const?koaBody?=?require("koa-body");
const?fs?=?require("fs");
const?usersData?=?require("./data/users.json");
let?app?=?new?Koa();
app.use(static(__dirname+"/static"));
app.use(koaBody({
????multipart:true
}));
let?router?=?new?Router();
router.get("/",(ctx,next)=>{
????ctx.body?=?"hello";
})
router.get("/checkUserName",(ctx,next)=>{
????console.log(ctx.query.username);
????let?res?=??usersData.find(v=>v.username==ctx.query.username);
????if(res){
????????ctx.body?=?{
????????????status:1,
????????????info:"用戶名正確"
????????};
????}else{
????????ctx.body?=?{
????????????status:2,
????????????info:"用戶名錯(cuò)誤"
????????};
????}
})
router.get("/get/:id",(ctx,next)=>{
????console.log(ctx.params);
????ctx.body?=?{
????????status:1,
????????info:"請(qǐng)求成功"
????}
})
router.post("/post",(ctx,next)=>{
????console.log(ctx.request.body);
????ctx.body?=?{
????????status:1,
????????info:"post請(qǐng)求成功"
????}
})
router.get("/xml",(ctx,next)=>{
????//?ctx.set("content-type","text/xml");
????ctx.body?=?`<?xml?version='1.0'?encoding='utf-8'??>
????????????????????<books>
????????????????????????<nodejs>
????????????????????????????<name>nodejs實(shí)戰(zhàn)</name>
????????????????????????????<price>56元</price>
????????????????????????</nodejs>
????????????????????????<react>
????????????????????????????<name>react入門</name>
????????????????????????????<price>50元</price>
????????????????????????</react>
????????????????????</books>
????????????????`
})
router.post("/upload",(ctx,next)=>{
????console.log(ctx.request.body);
????console.log(ctx.request.files.img);
?????let?fileData?=??fs.readFileSync(ctx.request.files.img.path);
????fs.writeFileSync("static/imgs/"+ctx.request.files.img.name,fileData);
????ctx.body?=?"請(qǐng)求成功";
})
router.post("/fileUpload",(ctx,next)=>{
????console.log(ctx.request.files);
????let?fileData?=??fs.readFileSync(ctx.request.files.myfile.path);
????fs.writeFileSync("static/imgs/"+ctx.request.files.myfile.name,fileData);
????ctx.body?=?"請(qǐng)求成功";
})
app.use(router.routes());
app.listen(3000);
