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