jquery+ajax實現(xiàn)異步上傳文件顯示進度條
前言:
今天項目中加了一個上傳文件加進度條的需求,我就搞了一下。時間寶貴不多說,直接進入正題。
異步上傳文件是要用到ajax里的一個小的知識點:xhr(XML Http Request)一個對象,xhr對象也是ajax一個核心。
關(guān)于使用它也很簡單:就四步(下面這樣寫也可以向后端進行發(fā)送請求)
var xhr=new XMLHttpRequest()//創(chuàng)建xhr對象 xhr.open('請求方式','請求的地址') xhr.send()//發(fā)佛那個請求 xhr.onreadystatechange=function(){ if (xhr.readyState==4){//得到服務(wù)端返回的狀態(tài)碼 console.log(xhr.responseText)//輸出返回結(jié)果 } }
介紹完xhr繼續(xù)說上傳文件的:(注意:在展示效果的時候,有一個知識點,就是css樣式,一定要在添加的在<b>之前,否則當(dāng)三上傳的文件較小的時候,會不顯示效果)
//上傳文件 $("#btnSubmit").click(function () { if (!(confirm("確定提交嗎?"))) { return; } else { var formData = new FormData();//上傳文件必須寫的 var fileNum = $("#file_input")[0].files.length;//上傳文件的個數(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類型的文件,請重新上傳"); $("#file_input").val("");//將選擇的文件清除 }//判斷文件大小 //else if ($("#file_input")[0].files[0].size / 1024 / 1024 > 1024) { //alert("請選擇文件大小為1G以內(nèi)文件"); //$("#file_input").val(""); //return; //} else { //formData.append(key,value)的值不能一樣,否則只會拿到一個文件 formData.append('file', file[0]);//拿到zip文件 //console.log(formData.get('file'));查看添加到formData的文件 } $.ajax({ url: 'https://www.baidu.com',//用百度測試的。哈哈 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請求頭,否則后端拿不到數(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); //顯示進度條 $("#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("請選擇文件上傳"); } } })
效果展示:
更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》,《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)電梯導(dǎo)航案例詳解(切換?網(wǎng)頁區(qū)域)
日常生活中用手機,電腦瀏覽網(wǎng)頁時,滑到了頁面下端后想返回頂部 或 跳轉(zhuǎn)到頁面別的版塊,用鼠標滾動很麻煩,網(wǎng)頁電梯導(dǎo)航就可以很方便的精準到達目標版塊,本文給大家分享jquery電梯導(dǎo)航案例詳解,感興趣的朋友一起看看吧2022-05-05如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性?下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04jQuery時間驗證和轉(zhuǎn)換為標準格式的時間格式
本篇文章主要介紹了jQuery時間驗證和轉(zhuǎn)換為標準格式的時間示例代碼,具有一定的參考價值,有興趣的可以了解一下。2017-03-03與jquery serializeArray()一起使用的函數(shù),主要來方便提交表單
與jquery serializeArray()一起使用的函數(shù),主要來方便提交表單,需要的朋友可以參考下。2011-01-01asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
由于需求需要用到一個滾動滾動條加載數(shù)據(jù)的下拉列表(假如數(shù)據(jù)1000條,下拉列表開始只顯示100條,當(dāng)用戶下拉滾到條到最底下時,再加載下一個100條,如此循環(huán))2010-06-06