本文實例講述了springboot帶有進度條的上傳功能。分享給大家供大家參考，具體如下：
一、說明
最近要做文件上傳，在網上找了很久都沒有一個全面的示例，特此記錄下來分享給大家。
1.文件上傳接口可按照springboot默認實現，也可用commons-fileupload組件，本示例使用springboot默認文件上傳 2.最后也有commons-fileupload組件接口示例
2.重點在前端JS實現（也可以使用ajax上傳），參考了網上大量上傳文件顯示進度條博客以及技術方案，在此做了一個統一的總結，方便后續使用
3.這僅僅是一個示例，大家可根據實際需要改進。
二、前端代碼
<!DOCTYPE html><html><meta charset="UTF-8" /><head><title>文件上傳</title><link rel="external nofollow" rel="stylesheet"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></head><body class="container"> <br /> <span ></span> <div class="row"> <input class="btn btn-info btn-xs" type="file" name="file" /><br /> <div class="col-lg-5" > <div class="progress progress-striped active" > <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" ></div> </div> </div> <!-- 顯示上傳速度 --> <div class="col-lg-2">0KB/s</div> </div> <!-- 顯示文件信息 --> <div class="row"> <label name="upfileName"></label><br /> <label name="upfileSize"></label><br /> <label name="upfileType"></label><br /> </div> <div class="row"> <input class="btn btn-success btn-xs" type="button" name="upload" value="上傳" /> <input class="btn btn-success btn-xs" type="button" name="cancelUpload" value="取消" /> </div></body><script type="text/javascript"> var fileBtn = $("input[name=file]"); var processBar= $("#progressBar"); var uploadBtn=$("input[name=upload]"); var canelBtn=$("input[name=cancelUpload]"); var ot;//上傳開始時間 var oloaded;//已上傳文件大小 fileBtn.change(function() { var fileObj = fileBtn.get(0).files[0]; //js獲取文件對象 if (fileObj) { var fileSize = getSize(fileObj.size); $("label[name=upfileName]").text('文件名：' + fileObj.name); $("label[name=upfileSize]").text('文件大小：' + fileSize); $("label[name=upfileType]").text('文件類型：' + fileObj.type); uploadBtn.attr('disabled', false); } }); // 上傳文件按鈕點擊的時候 uploadBtn.click(function(){ // 進度條歸零 setProgress(0); // 上傳按鈕禁用 $(this).attr('disabled', true); // 進度條顯示 showProgress(); // 上傳文件 uploadFile(); }); function uploadFile(){ var url ="/to/upload"; var fileObj = fileBtn.get(0).files[0]; if(fileObj==null){ alert("請選擇文件"); return; } // FormData 對象 var form = new FormData(); form.append('file', fileObj); // 文件對象 // XMLHttpRequest 對象 var xhr = new XMLHttpRequest(); //true為異步處理 xhr.open('post', url, true); //上傳開始執行方法 xhr.onloadstart = function() { console.log('開始上傳') ot = new Date().getTime(); //設置上傳開始時間 oloaded = 0;//已上傳的文件大小為0 }; xhr.upload.addEventListener('progress', progressFunction, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.send(form); function progressFunction(evt) { debugger; if (evt.lengthComputable) { var completePercent = Math.round(evt.loaded / evt.total * 100) + '%'; processBar.width(completePercent); processBar.text(completePercent); var time = $("#time"); var nt = new Date().getTime(); //獲取當前時間 var pertime = (nt-ot)/1000; //計算出上次調用該方法時到現在的時間差，單位為s ot = new Date().getTime(); //重新賦值時間，用于下次計算 var perload = evt.loaded - oloaded; //計算該分段上傳的文件大小，單位b oloaded = evt.loaded; //重新賦值已上傳文件大小 //上傳速度計算 var speed = perload/pertime;//單位b/s var bspeed = speed; var units = 'b/s';//單位名稱 if(speed/1024>1){ speed = speed/1024; units = 'k/s'; } if(speed/1024>1){ speed = speed/1024; units = 'M/s'; } speed = speed.toFixed(1); //剩余時間 var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1); $("#showInfo").html(speed+units+'，剩余時間：'+resttime+'s'); } } //上傳成功后回調 function uploadComplete(evt) { uploadBtn.attr('disabled', false); console.log('上傳完成') }; //上傳失敗回調 function uploadFailed(evt) { console.log('上傳失敗' + evt.target.responseText); } //終止上傳 function cancelUpload() { xhr.abort(); } //上傳取消后回調 function uploadCanceled(evt) { console.log('上傳取消,上傳被用戶取消或者瀏覽器斷開連接:' + evt.target.responseText); } canelBtn.click(function(){ uploadBtn.attr('disabled', false); cancelUpload(); }) } function getSize(size) { var fileSize = '0KB'; if (size > 1024 * 1024) { fileSize = (Math.round(size / (1024 * 1024))).toString() + 'MB'; } else { fileSize = (Math.round(size / 1024)).toString() + 'KB'; } return fileSize; } function setProgress(w) { processBar.width(w + '%'); } function showProgress() { processBar.parent().show(); } function hideProgress() { processBar.parent().hide(); }</script></html>
新聞熱點
疑難解答
