文件上傳進度提示

MageekChiu 發(fā)布于2019-08-20 15:17 / 2398人閱讀

摘要：需求當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。

需求

當上傳的文件相對較大時，用戶可能需要等待較長的時間，這個時候前端如果沒有任何提示的話，體驗不是很好，如果有上傳進度提示，就會好很多。而要在上傳過程實時顯示上傳進度，則需要已上傳的大小和文件總大小。

前提

請求是異步的。因為要實時獲取到上傳的進度，則請求需是異步的，如果是同步的話，會直到請求完成才能獲取到響應。

實現(xiàn)

這里總結的主要是js方面，至于進度條的顯示，有的UI框架，比如semantic就自帶了進度條的實現(xiàn)，直接使用即可，沒有的話也可以自己用改變div寬度等方式實現(xiàn)，這里不贅述。

如何獲取到文件的上傳進度？
Javascript的XMLHttpRequest提供了一個progress事件，這個事件會返回文件已上傳的大小和總大小，根據(jù)這兩個值，就可以計算上傳進度了，關于這個方法，在《Javascript高級程序設計(第3版)》21章第3節(jié)中有敘述，有這本書在手的可以看一下。下面貼一下代碼。

XMLHttpRequest:progress事件

使用Javascript的XMLHttpRequest的progress事件，實現(xiàn)示例代碼為：

var formData = new FormData(); 
formData.append("file", document.getElementById("file").files[0]); 
formData.append("token", token_value); // 其他參數(shù)按這樣子加入

var xhr = new XMLHttpRequest();
xhr.open("POST", "/uploadurl");
// 上傳完成后的回調(diào)函數(shù)
xhr.onload = function () {
  if (xhr.status === 200) {
　　console.log("上傳成功");
  } else {
  　console.log("上傳出錯");
  }
};
// 獲取上傳進度
xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var percent = Math.floor(event.loaded / event.total * 100) ;
    // 設置進度顯示
    $("#J_upload_progress").progress("set progress", percent);
  }
};
xhr.send(formData);

關于FormData和XMLHttpRequest, 可以搜下W3C了解詳情。

jQuery封裝的xhr

jQuery封裝了xhr的實現(xiàn), 也可以使用jQuery的ajax獲得上傳進度，示例代碼：

var formData = new FormData(); 
formData.append("file", document.getElementById("file").files[0]); 
formData.append("token", token_value); 

$.ajax({ 
    url: "/uploadurl", 
    type: "POST", 
    data: formData, 
    processData: false, // 不要對data參數(shù)進行序列化處理，默認為true
    contentType: false, // 不要設置Content-Type請求頭，因為文件數(shù)據(jù)是以 multipart/form-data 來編碼
    xhr: function(){
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
          myXhr.upload.addEventListener("progress",function(e) {
            if (e.lengthComputable) {
              var percent = Math.floor(e.loaded/e.total*100);
              if(percent <= 100) {
                $("#J_progress_bar").progress("set progress", percent);
                $("#J_progress_label").html("已上傳："+percent+"%");
              }
              if(percent >= 100) {
                $("#J_progress_label").html("文件上傳完畢，請等待...");
                $("#J_progress_label").addClass("success");
              }
            }
          }, false);
        }
        return myXhr;
    },
    success: function(res){ 
        // 請求成功
    },
    error: function(res) {
        // 請求失敗
        console.log(res);
    }
});

關于jQuery ajax的xhr, 具體可查看W3C。

vue-resource

var formData = new FormData();
formData.append("token", token_value);  // csrf token
formData.append("works", document.getElementById("file").files[0]); // file
var url = $("#R_batch_upload_url").val();

vm.$http.post(url, formData, {
  progress: (e) => {
    if (e.lengthComputable) {
      var percent = Math.floor(e.loaded/e.total*100);
      if(percent <= 100) {
        $("#J_progress_bar").progress("set progress", percent);
        $("#J_progress_label").html("已上傳："+percent+"%");
      }
      if(percent >= 100) {
        $("#J_progress_label").html("文件上傳完畢，提交表單中，請等待...");
        $("#J_progress_label").addClass("success");
      }
    }
  }
})
.then((res) => {
  if(res.ok && res.status === 200) {
    window.location.href = window.location.href;
  }
}, (res) => {
  if(res.status === 400) {
      $("#J_progress_label").html("文件格式錯誤，請修改后重試");
      $("#J_progress_label").addClass("warning");
      console.log(res);
      vm.errMsg.show = true;
      vm.errMsg.msg = res.body.msg;
      vm.canSend = true;
      // TODO hide the loader dimmer
      $("#J_upload_batch").dimmer("hide");
    } else {
      $("#J_progress_label").html(res.statusText);
      $("#J_progress_label").addClass("warning");
    }
});

七牛云儲存

有些文件過大，后臺會采取上傳到七牛，再獲取其地址保存到數(shù)據(jù)庫的方式，這種方式的話，前端可以使用上面兩種方式XMLHttpRequest或jQuery封裝的xhr實現(xiàn)發(fā)送請求及獲取上傳進度，如果需要更復雜的上傳數(shù)據(jù)處理，也可以考慮使用七牛提供的配套Javascript SDK實現(xiàn)，若是只需要進度提示的話，并不需要引入七牛JS SDK。

另外一點，上傳成功后設置重定向到網(wǎng)站某頁面的話，可能會報錯跨域重定向。

相關鏈接

阮一峰：文件上傳的漸進式增強

jquery xhr upload屬性包裝

關于文件上傳的那些事

html5上傳進度實現(xiàn)

七牛文件上傳303重定向

重定向 CORS 跨域請求

七牛云存儲-Javascript SDK

GPU云服務器云服務器文件上傳進度條上傳文件提示json swift圓環(huán)進度提示 java 進度提示框

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82139.html

在Vue項目中使用WebUploader實現(xiàn)文件上傳

摘要：簡介是由團隊開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

mindwind 2019-08-02 15:35 評論0 收藏0
在Vue項目中使用WebUploader實現(xiàn)文件上傳

摘要：簡介是由團隊開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

endiat 2019-08-26 10:14 評論0 收藏0
在Vue項目中使用WebUploader實現(xiàn)文件上傳

摘要：簡介是由團隊開發(fā)的一個簡單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

funnyZhang 2019-08-30 11:27 評論0 收藏0
TP5整合阿里云OSS上傳文件第二節(jié),異步上傳頭像實現(xiàn),

摘要：版本也是我最喜歡的方式這個代碼有點黏在一起了湊合看把李昊天創(chuàng)建實例服務器異步接受地址指定選擇文件的按鈕容器禁止多選不壓縮選擇之后自動上傳防止低版本瀏覽器用到了只允許選擇圖片文件。 TP5整合阿里云OSS上傳文件第二節(jié),上傳頭像實現(xiàn)首先先看一個效果圖上傳失敗效果圖:showImg(https://segmentfault.com/img/bVbaJLZ?w=983&h=561);上傳成功...

douzifly 2019-08-22 17:19 評論0 收藏0
TP5整合阿里云OSS上傳文件第二節(jié),異步上傳頭像實現(xiàn),

摘要：版本也是我最喜歡的方式這個代碼有點黏在一起了湊合看把李昊天創(chuàng)建實例服務器異步接受地址指定選擇文件的按鈕容器禁止多選不壓縮選擇之后自動上傳防止低版本瀏覽器用到了只允許選擇圖片文件。 TP5整合阿里云OSS上傳文件第二節(jié),上傳頭像實現(xiàn)首先先看一個效果圖上傳失敗效果圖:showImg(https://segmentfault.com/img/bVbaJLZ?w=983&h=561);上傳成功...

dayday_up 2019-07-01 12:28 評論0 收藏0