上传速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" class="myfile">
进度 <progress value="0" max="100"></progress>
<span class="percent">0%</span>
速度: <span class="speed">0b/s</span>
<button>点击上传</button>
<img src="" alt="" style="width: 100px; height: 100px;">
<script>
// ajax从点击事件外创建,防止点击一下新建一个ajax
xhr = new XMLHttpRequest();
let stime; // 存储时间
let sloaded; // 存储上传的内容
let btn = document.querySelector("button");
btn.onclick = function(){
// 获取到上传的文件
let file = document.querySelector(".myfile").files[0];
// 实例化FormData;
let form = new FormData();
// 将上传的文件添加到form
form.append("myfile",file);
// 上传 1.上传方式 2.路径 3.是否异步
xhr.open("post","fileUpload",true);
// 接收返回值
xhr.onload = function(){
document.querySelector("img").src = `./imgss/${xhr.responseText}`
};
xhr.upload.onloadstart = function(){
console.log('开始上传');
// 重新存储一下时间和上传内容
stime = new Date().getTime();
sloaded = 0;
};
xhr.upload.onprogress = function(evt){
console.log('上传中');
// 当前文件上传的大小 : evt.loaded
// 需要传输的总大小 : evt.total
let percent = ((evt.loaded / evt.total) * 100).toFixed(0);
// 给进度条和他后边的 % 赋值
document.querySelector("progress").value = percent;
document.querySelector(".percent").innerHTML = percent + "%";
// 上传速度
let endTime = new Date().getTime();
// 1. 时间差(时间段)
let dTime = (endTime - stime) / 1000;
// 2. 当前时间段内上传的文件大小
let dloaded = evt.loaded - sloaded;
// 3. 当前速度 = 当前的上传的内容 / 当前的时间差
let speed = dloaded / dTime;
stime = new Date().getTime();
// 单位
let unit = "b/s";
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(1) + unit;
};
xhr.upload.onload = function(){
console.log("上传成功");
};
xhr.upload.onerror = function(){
console.log("上传失败");
};
xhr.upload.onloadend = function(){
console.log("上传完成");
}
// 发送服务器
xhr.send(form);
}
</script>
</body>
</html>
取消上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" class="myfile">
进度 <progress value="0" max="100"></progress>
<span class="percent">0%</span>
速度: <span class="speed">0b/s</span>
<button>点击上传</button>
<button>取消上传</button>
<img src="" alt="" style="width: 100px; height: 100px;">
<script>
// ajax从点击事件外创建,防止点击一下新建一个ajax
xhr = new XMLHttpRequest();
let stime; // 存储时间
let sloaded; // 存储上传的内容
let btns = document.querySelectorAll("button");
btns[0].onclick = function(){
// 获取到上传的文件
let file = document.querySelector(".myfile").files[0];
// 实例化FormData;
let form = new FormData();
// 将上传的文件添加到form
form.append("myfile",file);
// 上传 1.上传方式 2.路径 3.是否异步
xhr.open("post","fileUpload",true);
// 接收返回值
xhr.onload = function(){
document.querySelector("img").src = `./imgss/${xhr.responseText}`
};
xhr.upload.onloadstart = function(){
console.log('开始上传');
// 重新存储一下时间和上传内容
stime = new Date().getTime();
sloaded = 0;
};
xhr.upload.onprogress = function(evt){
console.log('上传中');
// 当前文件上传的大小 : evt.loaded
// 需要传输的总大小 : evt.total
let percent = ((evt.loaded / evt.total) * 100).toFixed(0);
// 给进度条和他后边的 % 赋值
document.querySelector("progress").value = percent;
document.querySelector(".percent").innerHTML = percent + "%";
// 上传速度
let endTime = new Date().getTime();
// 1. 时间差(时间段)
let dTime = (endTime - stime) / 1000;
// 2. 当前时间段内上传的文件大小
let dloaded = evt.loaded - sloaded;
// 3. 当前速度 = 当前的上传的内容 / 当前的时间差
let speed = dloaded / dTime;
stime = new Date().getTime();
// 单位
let unit = "b/s";
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(1) + unit;
};
xhr.upload.onload = function(){
console.log("上传成功");
};
xhr.upload.onerror = function(){
console.log("上传失败");
};
xhr.upload.onloadend = function(){
console.log("上传完成");
}
// 发送服务器
xhr.send(form);
}
btns[1].onclick = function(){
xhr.abort();
}
</script>
</body>
</html>
服务器文件
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
const fs = require("fs");
let app = new Koa();
let router = new Router();
app.use(koaBody({
multipart: true
}));
app.use(static(__dirname + "/static"));
router.get("/", ctx => {
ctx.body = "hello world"
});
router.post("/fileUpload", ctx => {
let fileData = fs.readFileSync(ctx.request.files.myfile.path);
fs.writeFileSync("static/imgss/" + ctx.request.files.myfile.name, fileData);
ctx.body = ctx.request.files.myfile.name;
});
router.get("/xml", ctx => {
// 接口文档 接口:/xml
// ctx.set("content-type","text/xml"); // 设置文档接口,如果不设置,需在前端页面内设置
// ? 开启 ? 结尾
ctx.body = `<?xml version='1.0' encoding='utf-8' ?>
<books>
<nodejs>
<name>node实战</name>
<price>56元</price>
</nodejs>
<vue>
<name>vue实战</name>
<price>59元</price>
</vue>
</books>
`;
})
app.use(router.routes());
app.listen(8080);
XML
XML: 是一种数据格式,前端发送请求,后端接收并处理请求后再返回响应,前段在接收,一般主流方式是JSON与XML
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击发送ajax</button>
<script>
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","/xml",true);
// 客户端设置 content-type 一般是服务端没开的时候在这里设置,服务端设置了就不需要了
xhr.overrideMimeType("text/xml");
xhr.onload = function(){
// console.log(xhr.responseText);
console.log(xhr.responseXML);
let name = xhr.responseXML.getElementsByTagName("name")[0].innerHTML;
console.log(name);
};
xhr.send();
}
</script>
</body>
</html>
//=======================================================================
//服务器文件
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
let app = new Koa();
let router = new Router();
app.use(static(__dirname + "/static"));
router.get("/", ctx => {
ctx.body = "hello world"
});
router.get("/xml", ctx => {
ctx.body = `<?xml version='1.0' encoding='utf-8' ?>
<books>
<nodejs>
<name>node实战</name>
<price>56元</price>
</nodejs>
<vue>
<name>vue实战</name>
<price>59元</price>
</vue>
</books>
`;
})
app.use(router.routes());
app.listen(8080);
注意点
- 问号开启问号结束
- 设置文档接口,在服务器或者前端都可以