前端-JS上传文件进度条的实现

作者: 木头就是我呀 | 来源:发表于2019-03-25 18:23 被阅读0次

实现类似百度网盘上传的功能
前端-JS上传文件进度条的实现
ajax实现展示上传进度条
前端实现上传文件进度条
spring-boot 文件上传下载
CTF之文件操作漏洞
WebSocket SpringBoot实现文件上传进度消息通知
js ajax请求进度条
web修炼-SpringMVC实现文件上传下载等实例
LayUI上传附件进度条+TinyMCE富文本上传视频进度条的实

body中添加如下代码


上传文件: <input type="file" name="file" id="myFile">
<button onclick="upload()">确认上传</button>

<div class="show_info">
    文件信息:...
</div>
<div class="show_result">
    返回结果:...
</div>
<button onclick="test()">测试按钮</button>

<div class="demo">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
                         style="width: 0%;">
                        <div class="progress-value" id="mt-progress-value">0%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

效果如下：

image.png

接下来是JS获取到上传的文件的相关信息

 $(":file").change(function () {
        var file = this.files[0];
        var name = file.name;
        var size = file.size;
        var type = file.type;

        url = window.URL.createObjectURL(file);

        totalSize += size;

        $(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);
        console.log("ok");

        // 恢复进度条的状态
        //背景成绿色
        $(".progress").css("background", "#262626");
        //归零 隐藏
        $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
        $("#mt-progress-value").html(0);

    })

点击上传的事件

function upload() {
        //背景恢复
        $(".progress").css("background", "#262626");
        //归零 隐藏
        $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
        $("#mt-progress-value").html(0);


        //创建formData对象  初始化为form表单中的数据
        //需要添加其他数据  就可以使用 formData.append("property", "value");
        var formData = new FormData();
        var fileInput = document.getElementById("myFile");
        var file = fileInput.files[0];
        formData.append("file", file);

        // ajax异步上传
        $.ajax({
            url: "http://localhost:1001/login/upload",
            type: "POST",
            data: formData,
            contentType: false, //必须false才会自动加上正确的Content-Type
            processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
            enctype: 'multipart/form-data',
            xhr: function () {
                //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    //检查其属性upload是否存在
                    myXhr.upload.addEventListener("progress", resultProgress, false);
                }
                return myXhr;
            },
            success: function (data) {
                console.log("aaa");
            },
            error: function (data) {
                console.log("cccc");
            }
        })
    }

注意重点：myXhr.upload.addEventListener("progress", resultProgress, false);
其中resultProgress是回调函数的函数名
回调函数如下

//上传进度回调函数
    function resultProgress(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            $(".show_result").html(percent + "%");
            var percentStr = String(percent);
            if (percentStr == "100") {
                percentStr = "100.0";
            }
            percentStr = percentStr.substring(0, percentStr.indexOf("."));
            $("#mt-progress-value").html(percentStr);
            $("#mt-progress-length").css("width", percentStr + "%");

            if (percentStr == "100") {
                setTimeout(function () {
                    //背景成绿色
                    $(".progress").css("background", "#15AD66");
                    //归零 隐藏
                    $("#mt-progress-length").css({"width": "0%", "opacity": "0"});
                }, 500);
            }
        }

这是前端的部分代码
下面是后端的部分代码

拦截器中添加请求头

response.setHeader("Access-Control-Allow-Origin", "*");

controller中添加对应的接口地址

@RequestMapping(value = "/upload", method = RequestMethod.POST)
 public Map<String, String> upload(
     @RequestParam("file") MultipartFile file,
     HttpServletResponse response,
     HttpServletRequest request) {
   //    request.
   response.setHeader("Access-Control-Allow-Origin", "*");
//    request.
   System.out.println("this is upload...");
   Map<String, String> map = new HashMap<>();
   map.put("aaa", "bbb");
   return map;
 }

即可完成上传时触发回调函数更新页面数据从而修改进度条的值

下面是完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<style type="text/css">
    .demo {
        padding: 2em 0;
        background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
    }

    .progress {
        height: 25px;
        background: #262626;
        padding: 5px;
        overflow: visible;
        border-radius: 20px;
        border-top: 1px solid #000;
        border-bottom: 1px solid #7992a8;
        margin-top: 50px;
    }

    .progress .progress-bar {
        border-radius: 20px;
        position: relative;
        animation: animate-positive 2s;
    }

    .progress .progress-value {
        display: block;
        padding: 3px 7px;
        font-size: 13px;
        color: #fff;
        border-radius: 4px;
        background: #191919;
        border: 1px solid #000;
        position: absolute;
        top: -40px;
        right: -10px;
    }

    .progress .progress-value:after {
        content: "";
        border-top: 10px solid #191919;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        position: absolute;
        bottom: -6px;
        left: 26%;
    }

    .progress-bar.active {
        animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
    }

    @-webkit-keyframes animate-positive {
        0% {
            width: 0;
        }
    }

    @keyframes animate-positive {
        0% {
            width: 0;
        }
    }
</style>

<body>


上传文件: <input type="file" name="file" id="myFile">
<button onclick="upload()">确认上传</button>

<div class="show_info">
    文件信息:...
</div>
<div class="show_result">
    返回结果:...
</div>
<button onclick="test()">测试按钮</button>

<div class="demo">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="progress">
                    <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
                         style="width: 0%;">
                        <div class="progress-value" id="mt-progress-value">0%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var totalSize = 0;


    $(":file").change(function () {
        var file = this.files[0];
        var name = file.name;
        var size = file.size;
        var type = file.type;

        url = window.URL.createObjectURL(file);

        totalSize += size;

        $(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);
        console.log("ok");

        // 恢复进度条的状态
        //背景成绿色
        $(".progress").css("background", "#262626");
        //归零 隐藏
        $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
        $("#mt-progress-value").html(0);

    })


    function upload() {
        //背景恢复
        $(".progress").css("background", "#262626");
        //归零 隐藏
        $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
        $("#mt-progress-value").html(0);


        //创建formData对象  初始化为form表单中的数据
        //需要添加其他数据  就可以使用 formData.append("property", "value");
        var formData = new FormData();
        var fileInput = document.getElementById("myFile");
        var file = fileInput.files[0];
        formData.append("file", file);

        // ajax异步上传
        $.ajax({
            url: "http://localhost:1001/login/upload",
            type: "POST",
            data: formData,
            contentType: false, //必须false才会自动加上正确的Content-Type
            processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
            enctype: 'multipart/form-data',
            xhr: function () {
                //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    //检查其属性upload是否存在
                    myXhr.upload.addEventListener("progress", resultProgress, false);
                }
                return myXhr;
            },
            success: function (data) {
                console.log("aaa");
            },
            error: function (data) {
                console.log("cccc");
            }
        })
    }

    //上传进度回调函数
    function resultProgress(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            $(".show_result").html(percent + "%");
            var percentStr = String(percent);
            if (percentStr == "100") {
                percentStr = "100.0";
            }
            percentStr = percentStr.substring(0, percentStr.indexOf("."));
            $("#mt-progress-value").html(percentStr);
            $("#mt-progress-length").css("width", percentStr + "%");

            if (percentStr == "100") {
                setTimeout(function () {
                    //背景成绿色
                    $(".progress").css("background", "#15AD66");
                    //归零 隐藏
                    $("#mt-progress-length").css({"width": "0%", "opacity": "0"});
                }, 500);


            }
        }
    }
</script>
</html>

实现类似百度网盘上传的功能
今天写到了上传文件部分，记录一下。前端使用了dropzone.js（用于实现文件上传的JS库），并对此文件进行了...
前端-JS上传文件进度条的实现
body中添加如下代码效果如下：接下来是JS获取到上传的文件的相关信息点击上传的事件注意重点：myXhr....
ajax实现展示上传进度条
上传的进度条progressFunction函数具体参照上一条原生js实现上传进度条
前端实现上传文件进度条
效果代码
spring-boot 文件上传下载
1.文件上传配置 2.前端写法 3.后端实现单文件上传 4.后端实现多文件上传 5.后端实现文件下载
CTF之文件操作漏洞
一、文件上传漏洞 1、文件上传检测：（1）js检测（前端校验）：查看源码！禁用js或burp抓包修改（2）mime...
WebSocket SpringBoot实现文件上传进度消息通知
1. 需求实现文件上传进度条展示实现耗时异步任务完成消息通知其他消息通知 2. 方案文件上传进度消息：后...
js ajax请求进度条
上传&下载文件时添加进度条主要是通过监听progress事件来实现该操作上传文件部分代码： varfileOb...
web修炼-SpringMVC实现文件上传下载等实例
添加上传的Maven依赖在mvc配置文件中添加上传文件的Bean 创建单上传的前端页面 oneUpload.js...
LayUI上传附件进度条+TinyMCE富文本上传视频进度条的实
LayUI上传附件进度条目前文件上传基本没有进度提示，可参考如下设置加入进度提示：替换upload.js 增加...