js 实现下载进度条

Java代码(单纯的文件下载
 1     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         response.setCharacterEncoding("UTF-8");
 3         String downloadFlg = (String)request.getParameter("downloadFlg");
 4         if("1".equals(downloadFlg)) {
 6             String fileName = "自定义文件名";
 7             //1.设置相应类型
 8             //强制下载文件(禁止浏览器打开)
 9             response.setContentType("application/force-download");
10             //2.读取文件
11             InputStream in = new FileInputStream("E:\\workspace\\FileDownload\\WebContent\\tmp\\"+fileName); 
12             //文件名的编码格式(防止文件名乱码
13             fileName = URLEncoder.encode(fileName, "UTF-8");
14             //设置响应头
15             response.setHeader("Content-Disposition", "attachment;filename="+fileName);
16             //设置文件大小(粗略的文件大小)
17             response.setContentLength(in.available());
18             //读取文件
19             ServletOutputStream outputStream = response.getOutputStream();
20             byte[] b = new byte[1024];
21             int len = 0;
22             while((len = in.read(b))!=-1) {
23                 outputStream.write(b, 0, len);
24             }
25             outputStream.flush();
26             outputStream.close();
27             in.close();
28             
29         }

JS代码:下载进度计算
 1 function download(){
 2        var downloadFlg = document.getElementById("downloadFlg").value;
 3        if(downloadFlg == "0"){
 4            alert("前一个文件下载未完成,请稍等.");
 5            return;
 6        }
 7        document.getElementById("downloadFlg").value = 0;
 8        progressDownLoad({url:"./FileDownloadServlet?downloadFlg=1",progress:function(evt){console.log(evt);}});
 9 
10            $.ajax({
11             url: "/FileDownload/FileDownloadServlet",  
12             type: "post",  
13             dataType: "json",
14             data: { "downloadFlg":"1", "fileDownload":"fileDownload" },
15             xhr: function(){
16                 var xhr = new window.XMLHttpRequest();
17                 //download progress
18                 xhr.addEventListener("progress", function (evt) {
19                     console.log(evt);
20                     if (evt.lengthComputable) {
21                         //计算下载进度
22                         var percentComplete = evt.loaded / evt.total;
23                         //换算
24                         percentComplete = Math.round(percentComplete * 100);
25                         //把下载进度显示到进度条
26                         document.getElementById("progress").value = percentComplete;
27                         //下载完成
28                         if(percentComplete==100){
29                                 document.getElementById("downloadFlg").value = 1;
30                                 document.getElementById("text").innerHTML = "文件下载完成";
31                         }
32                     }
33                 }, false);
34                 return xhr;
35             }
36         });
37            
38 }

用Ajax接管浏览器下载操作,实现文件下载

 1 /**
 2   * 下载文件
 3   * @param url: 文件请求路径
 4   * @param params: 请求参数
 5   * @param progress: 进度处理回调函数
 6   * @param success: 下载完成回调函数
 7   * eg: progressDownLoad({url:'http://loacalhost:8080/downLoad.action',name:'file.rar',progress:function(evt){
 8   *        console.log(evt);
 9   *     }});
10   **/
11   function progressDownLoad({url,params,progress,success} ){
12       var filename = "";
13       var xhr = new XMLHttpRequest();
14       xhr.open("POST", url, true);
15       //监听进度事件
16       xhr.addEventListener("progress", function (evt) {
17           if(progress) try{ progress.call(evt); }catch(e){}
18       }, false);
19 
20       //请求类型
21       xhr.responseType = "blob";
22       //设置请求头
23       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
24       //回调方法
25       xhr.onreadystatechange = function () {
26           if (xhr.readyState === 4 && xhr.status === 200) {
27               if (typeof window.chrome !== 'undefined') {
28                   // Chrome version
29                   //创建下载节点
30                   var link = document.createElement('a');
31                   link.href = window.URL.createObjectURL(xhr.response);
32                   //获取文件名
33                   filename = xhr.getResponseHeader("Content-disposition").split('=')[1];
34                   link.download = filename;
35                   link.click();
36               }
37               if(success) try{ success.call(xhr); }catch(e){}
38           }
39       };
40       var paramsStr = '';
41       if(params) for (var key in params) paramsStr += '&'+key+'='+params[key];
42       if(paramsStr) paramsStr = paramsStr.substring(1);
43 
44       xhr.send(paramsStr);
45   }

效果图:

参考代码:

   JS接管浏览器下载  js 文件下载/上传 进度条 - 代码先锋网 (codeleading.com)

   JS下载进度计算 javascript获取下载文件文件名_Tinley Liu的博客-CSDN博客