下载文件时显示动态的进度条(前端easyUI,后台java)

最近有点闲，我们的架构师让我在文件下载时显示进度条，咳咳，自从组里来了前端妹纸后，好久没写前端代码了。。。

架构师推荐的用监听器（链接找不到了。。。），实现得有点复杂，我没太看懂。继续百度，看到了“在下载时计算进度，然后把进度放到session中，另外写一个请求取session中的进度”，听起来简单可行，开始ctrl+C。

后端代码1：把流输出到servlet中

            outputStream = response.getOutputStream();
            int len = 0;

            //将进度放到session中，通过前端的定时请求获取进度
            double nowLen = 0;
            int percent;

            byte[] buf = new byte[4 * 1024];
            while ((len = inputStream.read(buf)) != -1) {
                outputStream.write(buf, 0, len);

                nowLen+=len;
                percent = new Double(nowLen/hhs.getContentLength()*100).intValue();
//                SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS");
//                System.out.println("----------------------------长度为："+hhs.getContentLength()+"  ，当前长度为： "+nowLen+" ,进度为： "+percent+" 当前时间为："+ sf.format(new Date()));
                request.getSession().setAttribute("percent",percent);

            }

ps：这个请求最开始要将session中的percent属性移除，不然很容易拿到上一次下载文件的进度100%

后端代码2：

    //获取下载进度
    @RequestMapping(value = "/flushProgress",method = RequestMethod.POST)
    @ResponseBody
    public JSONObject flushProgress(HttpServletRequest request){
        int percent = 0;
        HttpSession session = request.getSession();
        JSONObject res = new JSONObject();
        if(null!=session.getAttribute("percent")){
            percent = (Integer)session.getAttribute("percent") ;
        }
        res.put("percent",percent);
        return res;
    }

ps: post请求记得加@ResponseBody哦，不然没有返回的

前端代码：

前情提示：前端整体是用的easyUI,下载通过a标签的src发送一个get请求将文件输出到servlet中，点击a标签时开始定时器获取进度percent。

function downloadSignFiles(){
        $.messager.progress({
            title:"提示",
            msg:"文件下载中，请稍候......",
            value:0,
            interval:0
        });

        function getProgress () {
            $.ajax({
                url: '../../app/2rec/file/flushProgress.do',
                async: true,
                type: 'POST',
                data: '',
                success: function(response) {
                    var percent = response.percent;
                    $.messager.progress('bar').progressbar('setValue', percent);

                    // console.log("进度条的返回"+percent)
                    if(percent=="100"){
                        window.clearInterval(timeId);
                        setTimeout(function (){$.messager.progress('close')},1500);
                    }
                },
                error: function(error) {
                    $.messager.alert('失败提示', error.errorMessage);
                }
            });
        }
        var timeId = window.setInterval(getProgress,300);
    }

ps:
1、单纯用progressbar没有遮罩的效果，所以用"messager"弹窗
2、interval:0会让进度条过渡更平滑，不然会出现闪进闪退的效果
3、进度达到100%后应该关闭定时器，关闭进度条的弹窗
4、为了让用户可以看到100%，设置了延时关闭进度条的弹窗

哦对，async设置成true才是异步哦~