js獲取文件上傳進度

番茄西紅柿發布于2019-04-23 13:29 / 1789人閱讀

摘要：獲取文件上傳進度提交監聽綁定監聽使用閉包實現監聽綁通過獲得對象判斷監聽函數是否為函數如果有監聽函數并且對象支持綁定時就把監聽函數綁定上去文件上傳函數獲取文件對象加入文件對象上傳文件無需緩存用于對參數進行序列化處理這里必須必須文件上傳百分比完

js獲取文件上傳進度：

js監聽：

var xhrOnProgress=function(fun) {
	  xhrOnProgress.onprogress = fun; //綁定監聽
	  //使用閉包實現監聽綁
	  return function() {
	    //通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象
	    var xhr = $.ajaxSettings.xhr();
	    //判斷監聽函數是否為函數
	    if (typeof xhrOnProgress.onprogress !== function)
	      return xhr;
	    //如果有監聽函數并且xhr對象支持綁定時就把監聽函數綁定上去
	    if (xhrOnProgress.onprogress && xhr.upload) {
	      xhr.upload.onprogress = xhrOnProgress.onprogress;
	    }
	    return xhr;
	  }
}

　ajax文件上傳函數：

function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對象
		 var formFile = new FormData();
		 
         formFile.append("file", fileObj); //加入文件對象
        
          var data = formFile;
          $.ajax({
                   url: url,
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上傳文件無需緩存
                   processData: false,//用于對data參數進行序列化處理 這里必須false
                   contentType: false, //必須
                   xhr:xhrOnProgress(function(e){
		   			  var percent=e.loaded/e.total;//文件上傳百分比
		   			  console.log(percent);
		   		   }),
                   success: function (result) {
                       console.log(result);
                   },
               })
	}

完整代碼:




	
	
	
	Document

云服務器 GPU云服務器文件上傳進度條 js 獲取視頻進度 js 文件進度顯示頁面獲取上傳文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1953.html

文件上傳進度提示

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

MageekChiu 2019-08-20 15:17 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

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

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

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

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

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

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

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

douzifly 2019-08-22 17:19 評論0 收藏0