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

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

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>

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读