js獲取文件上傳進(jìn)度

番茄西紅柿發(fā)布于2019-04-23 13:29 / 1877人閱讀

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

js獲取文件上傳進(jìn)度：

js監(jiān)聽：

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

　ajax文件上傳函數(shù)：

function Submit(){

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

完整代碼:




	
	
	
	Document

云服務(wù)器 GPU云服務(wù)器文件上傳進(jìn)度條 js 獲取視頻進(jìn)度 js 文件進(jìn)度顯示頁面獲取上傳文件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1953.html

相關(guān)文章

文件上傳進(jìn)度提示

摘要：需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。需求當(dāng)上傳的文件相對(duì)較大時(shí)，用戶可能需要等待較長(zhǎng)的時(shí)間，這個(gè)時(shí)候前端如果沒有任何提示的話，體驗(yàn)不是很好，如果有上傳進(jìn)度提示，就會(huì)好很多。而要在上傳過程實(shí)時(shí)顯示上傳進(jìn)度，則需要已上傳的大小和文件總大小。前提請(qǐng)求是異步的。因?yàn)橐獙?shí)時(shí)獲取到上傳的進(jìn)度...

MageekChiu 2019-08-20 15:17 評(píng)論0 收藏0
在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

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

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

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

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

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

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

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

douzifly 2019-08-22 17:19 評(píng)論0 收藏0