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博客