當前位置 主頁 > 服務器問題 > Linux/apache問題 > 最大化 縮小

    springboot帶有進度條的上傳功能完整實例

    欄目:Linux/apache問題 時間:2019-11-04 10:25

    本文實例講述了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>
    
    
    
在线观看中文字幕理论片