js 文件上传 图片上传 传输速度计算
生活随笔
收集整理的這篇文章主要介紹了
js 文件上传 图片上传 传输速度计算
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
示例：
?參考一：
參考二：
參考三：
?參考一：
? <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#progress{height:10px;width:500px;border: 1px solid gold;position: relative;border-radius: 5px;}#progress .progress-item{height:100%;position: absolute;left:0;top:0;background: chartreuse;border-radius: 5px;transition: width .3s linear;}</style> </head> <body> 文件上傳框<br> <input type="file" id="file"><br> 顯示進(jìn)度條<br> <div id="progress"><div class="progress-item"></div> </div> 上傳成功后的返回內(nèi)容<br> <span id="callback"></span> </body> <script>//首先監(jiān)聽input框的變動，選中一個新的文件會觸發(fā)change事件document.querySelector("#file").addEventListener("change",function () {//獲取到選中的文件var file = document.querySelector("#file").files[0];//創(chuàng)建formdata對象var formdata = new FormData();formdata.append("file",file);//創(chuàng)建xhr，使用ajax進(jìn)行文件上傳var xhr = new XMLHttpRequest();xhr.open("post","/");//回調(diào)xhr.onreadystatechange = function () {if (xhr.readyState==4 && xhr.status==200){document.querySelector("#callback").innerText = xhr.responseText;}}//獲取上傳的進(jìn)度xhr.upload.onprogress = function (event) {if(event.lengthComputable){var percent = event.loaded/event.total *100;document.querySelector("#progress .progress-item").style.width = percent+"%";}}//將formdata上傳xhr.send(formdata);}); </script> </html>?參考二：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>XMLHttpRequest上傳文件</title><script type="text/javascript">//圖片上傳var xhr;//上傳文件方法function UpladFile() {var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象// CFF 上傳的接口失敗了。為啥？！var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上傳文件的后臺地址var form = new FormData(); // FormData 對象form.append("file", fileObj); // 文件對象xhr = new XMLHttpRequest(); // XMLHttpRequest 對象xhr.open("post", url, true); //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。xhr.onload = uploadComplete; //請求完成xhr.onerror = uploadFailed; //請求失敗xhr.upload.onprogress = progressFunction; //【上傳進(jìn)度調(diào)用方法實(shí)現(xiàn)】xhr.upload.onloadstart = function () {//上傳開始執(zhí)行方法ot = new Date().getTime(); //設(shè)置上傳開始時間oloaded = 0; //設(shè)置上傳開始時，以上傳的文件大小為0};xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)}//上傳成功響應(yīng)function uploadComplete(evt) {//服務(wù)斷接收完文件返回的結(jié)果var data = JSON.parse(evt.target.responseText);if (data.success) {alert("上傳成功！");} else {alert("上傳失敗！");}}//上傳失敗function uploadFailed(evt) {alert("上傳失敗！");}//取消上傳function cancleUploadFile() {xhr.abort();}//上傳進(jìn)度實(shí)現(xiàn)方法，上傳過程中會頻繁調(diào)用該方法function progressFunction(evt) {var progressBar = document.getElementById("progressBar");var percentageDiv = document.getElementById("percentage");// event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0if (evt.lengthComputable) {//progressBar.max = evt.total;progressBar.value = evt.loaded;percentageDiv.innerHTML =Math.round((evt.loaded / evt.total) * 100) + "%";}var time = document.getElementById("time");var nt = new Date().getTime(); //獲取當(dāng)前時間var pertime = (nt - ot) / 1000; //計(jì)算出上次調(diào)用該方法時到現(xiàn)在的時間差，單位為sot = new Date().getTime(); //重新賦值時間，用于下次計(jì)算var perload = evt.loaded - oloaded; //計(jì)算該分段上傳的文件大小，單位boloaded = evt.loaded; //重新賦值已上傳文件大小，用以下次計(jì)算//上傳速度計(jì)算var speed = perload / pertime; //單位b/svar bspeed = speed;var units = "b/s"; //單位名稱if (speed / 1024 > 1) {speed = speed / 1024;units = "k/s";}if (speed / 1024 > 1) {speed = speed / 1024;units = "M/s";}speed = speed.toFixed(1);//剩余時間var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);time.innerHTML ="，速度：" + speed + units + "，剩余時間：" + resttime + "s";if (bspeed == 0) time.innerHTML = "上傳已取消";}</script></head><body><progressid="progressBar"value="0"max="100"style="width: 300px"></progress><span id="percentage"></span><span id="time"></span><br /><br /><input type="file" id="file" name="myfile" /><input type="button" οnclick="UpladFile()" value="上傳" /><input type="button" οnclick="cancleUploadFile()" value="取消" /></body> </html>整理自 https://blog.csdn.net/weixin_41646716/article/details/90058189
總結(jié)
以上是生活随笔為你收集整理的js 文件上传 图片上传 传输速度计算的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第十三届“恩智浦”杯全国大学生智能汽车竞
- 下一篇： 恩智浦智能汽车竞赛电磁组总结