前后端交互——文件上传速度与取消上传、XML

于 2020-04-01 20:07:47 发布
阅读量538 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/105253834
版权

上传速度

<!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);

注意点

  1. 问号开启问号结束
  2. 设置文档接口，在服务器或者前端都可以
X可乐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值