1.Ajax上傳文件

如果動態(tài)上傳文件并獲取信息，則需使用Ajax上傳。

html代碼：

<form id="fileUpload" enctype="multipart/form-data"><input type="file" name="file">選擇文件 </form> <input id="submit" type="button" value="確認上傳" />

Js代碼：

$("#submit").click(function () {var formData = new FormData(document.getElementById("fileUpload"));$.ajax({type: "POST",url: "/upload",data: formData,processData: false,contentType: false,error: function (data) {console.log("上傳失敗！")},success: function (data) {console.log("上傳成功！")},});});

注意：我們可以使用FormData來組合表單中的數(shù)據(jù)

• 如果是普通數(shù)據(jù)，則組合為&name=value的形式。
• 如果是文件數(shù)據(jù)，則會生成相應(yīng)的文件流進行上傳

2.上傳過程中獲取信息

在文件上傳過程中，我們可以通過對ajax的xhr屬性注冊回調(diào)事件的方法來獲取上傳信息。

Js代碼：

$("#submit").click(function () {var formData = new FormData(document.getElementById("fileUpload"));$.ajax({type: "POST",url: "/upload",data: formData,processData: false,contentType: false,error: function (data) {console.log("上傳失敗！")},success: function (data) {console.log("上傳成功！")},xhr: function () {//獲取xhr對象var xhr = $.ajaxSettings.xhr();//檢查是否在上傳文件if (xhr.upload) {//綁定progress事件的回調(diào)函數(shù)xhr.upload.addEventListener('progress', progressHandle, false);}//xhr對象返回給jQuery使用return xhr; }});});function progressHandle(event) {console.log("總大小："+ event.total + " 已上傳：" + event.loaded);}

通過xhr.upload.addEventListener(‘progress’, progressHandle, false)方法我們
就可以獲取到相應(yīng)的數(shù)據(jù)：

• 其中event.total為文件的總大小，單位為：“b”
• 其中event.loaded為已上傳的大小，單位為：“b”

3.計算進度，速度，剩余時間

progressHandle(event)回調(diào)在每次文件上傳信息變化后都會自動執(zhí)行，我們只需要根據(jù)信息計算相應(yīng)的結(jié)果即可。

Js代碼：

var lastTime = 0;//上一次計算時間var lastSize = 0;//上一次計算的文件大小function progressHandle(event) {/*計算間隔*/var nowTime = new Date().getTime();var intervalTime = (nowTime - lastTime)/1000;//時間單位為毫秒，需轉(zhuǎn)化為秒var intervalSize = event.loaded - lastSize;/*重新賦值以便于下次計算*/lastTime = nowTime;lastSize = event.loaded;/*計算速度*/var speed = intervalSize/intervalTime;var bSpeed = speed;//保存以b/s為單位的速度值，方便計算剩余時間var units = 'b/s';//單位名稱if(speed/1024>1){speed = speed/1024;units = 'k/s';}if(speed/1024>1){speed = speed/1024;units = 'M/s';}/*計算剩余時間*/var leftTime = ((event.total - event.loaded) / bSpeed);/*計算進度*/var progress = event.loaded/event.total * 100;console.log("當(dāng)前進度：" + progress.toFixed(1) + "% 當(dāng)前速度：" + speed.toFixed(1) + units +" 預(yù)計剩余時間：" + leftTime.toFixed(1) + "秒");}

因為沒有初始化賦值，所以第一次獲取的數(shù)據(jù)有些問題，有需要的話可以通過賦初值的方法進行修正，或者直接跳過錯誤值！

Js代碼：

function progressHandle(event) {/*驗證數(shù)據(jù)*/if(lastTime == 0){lastTime = new Date().getTime();lastSize = event.loaded;return;}/*計算間隔*/var nowTime = new Date().getTime();var intervalTime = (nowTime - lastTime)/1000;//時間單位為毫秒，需轉(zhuǎn)化為秒var intervalSize = event.loaded - lastSize;/*重新賦值以便于下次計算*/lastTime = nowTime;lastSize = event.loaded;/*計算速度*/var speed = intervalSize/intervalTime;var bSpeed = speed;//保存以b/s為單位的速度值，方便計算剩余時間var units = 'b/s';//單位名稱if(speed/1024>1){speed = speed/1024;units = 'k/s';}if(speed/1024>1){speed = speed/1024;units = 'M/s';}/*計算剩余時間*/var leftTime = ((event.total - event.loaded) / bSpeed);/*計算進度*/var progress = event.loaded/event.total * 100;console.log("當(dāng)前進度：" + progress.toFixed(1) + "% 當(dāng)前速度：" + speed.toFixed(1) + units +" 預(yù)計剩余時間：" + leftTime.toFixed(1) + "秒");}

功能點全部完成！

總結(jié)

以上是生活随笔為你收集整理的Ajax上传文件（视频），并获取上传进度、上传速度和剩余时间。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。