jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條

更新時(shí)間：2020年08月17日 11:21:13 作者：小灰灰城堡

這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言：

今天項(xiàng)目中加了一個(gè)上傳文件加進(jìn)度條的需求，我就搞了一下。時(shí)間寶貴不多說(shuō)，直接進(jìn)入正題。

異步上傳文件是要用到ajax里的一個(gè)小的知識(shí)點(diǎn)：xhr（XML Http Request）一個(gè)對(duì)象，xhr對(duì)象也是ajax一個(gè)核心。

關(guān)于使用它也很簡(jiǎn)單：就四步（下面這樣寫也可以向后端進(jìn)行發(fā)送請(qǐng)求）

var xhr=new XMLHttpRequest()//創(chuàng)建xhr對(duì)象
  xhr.open('請(qǐng)求方式','請(qǐng)求的地址')
  xhr.send()//發(fā)佛那個(gè)請(qǐng)求
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){//得到服務(wù)端返回的狀態(tài)碼
     console.log(xhr.responseText)//輸出返回結(jié)果
    }
   }

介紹完xhr繼續(xù)說(shuō)上傳文件的：（注意：在展示效果的時(shí)候，有一個(gè)知識(shí)點(diǎn)，就是css樣式，一定要在添加的在<b>之前，否則當(dāng)三上傳的文件較小的時(shí)候，會(huì)不顯示效果）

//上傳文件
$("#btnSubmit").click(function () {
 if (!(confirm("確定提交嗎？"))) {
  return;
 }
 else {
  var formData = new FormData();//上傳文件必須寫的
  var fileNum = $("#file_input")[0].files.length;//上傳文件的個(gè)數(shù)
  if (fileNum > 0) {
   var file = $("#file_input")[0].files;//拿到文件
   //console.log(file[0].name);文件名
   var nameSuffix = file[0].name.split(".");
   if (nameSuffix[nameSuffix.length - 1] != "zip") {
    alert("上傳的文件不是zip類型的文件，請(qǐng)重新上傳");
    $("#file_input").val("");//將選擇的文件清除
   }//判斷文件大小
   //else if ($("#file_input")[0].files[0].size / 1024 / 1024 > 1024) {
    //alert("請(qǐng)選擇文件大小為1G以內(nèi)文件");
    //$("#file_input").val("");
    //return;
   //}
   else {
    //formData.append(key,value)的值不能一樣，否則只會(huì)拿到一個(gè)文件
    formData.append('file', file[0]);//拿到zip文件
    //console.log(formData.get('file'));查看添加到formData的文件
   }    
   $.ajax({
    url: 'https://www.baidu.com',//用百度測(cè)試的。哈哈
    type: 'post',
    async:true, //這里要設(shè)置異步上傳，才能成功調(diào)用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函數(shù)
    dataType: 'json',
    //Accept:'text/html;charset=UTF-8',
    processData: false,// 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
    contentType: false,// 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭,否則后端拿不到數(shù)據(jù)
    data: formData,
    xhr:function(){      
     var myXhr = $.ajaxSettings.xhr();
     if(myXhr.upload){ //檢查上傳的文件是否存在
      myXhr.upload.addEventListener('progress',function(e){       
       var loaded = e.loaded; //已經(jīng)上傳大小情況 
       var total = e.total; //附件總大小 
       var percent = Math.floor(100*loaded/total)+"%"; //已經(jīng)上傳的百分比 
       //console.log("已經(jīng)上傳了："+percent); 
       //顯示進(jìn)度條    
       $("#content").css("width",percent).css("height",20).css("margin-top",8).css("backgroundColor","#33CCFF").css("color","white").html("<b>"+percent+"</b>");                                
      }, false); // for handling the progress of the upload
     }
     return myXhr;
    },     
    success:function(data){      
     alert("上傳成功!!!!");      
    },
    error:function(){
     alert("上傳失??！");
      //上傳失敗后清空div的樣式和內(nèi)容
     $("#content").css("width",0).css("height",0).css("margin-top",0).css("backgroundColor","").text("");
    }
   })
  }
  else {
   alert("請(qǐng)選擇文件上傳");
  }
 }
})

效果展示：