js 文件上传图片上传传输速度计算

示例：

参考一：

参考二：

参考三：

参考一：


<!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>
显示进度条<br>
<div id="progress"><div class="progress-item"></div>
</div>
上传成功后的返回内容<br>
<span id="callback"></span>
</body>
<script>//首先监听input框的变动，选中一个新的文件会触发change事件document.querySelector("#file").addEventListener("change",function () {//获取到选中的文件var file = document.querySelector("#file").files[0];//创建formdata对象var formdata = new FormData();formdata.append("file",file);//创建xhr，使用ajax进行文件上传var xhr = new XMLHttpRequest();xhr.open("post","/");//回调xhr.onreadystatechange = function () {if (xhr.readyState==4 && xhr.status==200){document.querySelector("#callback").innerText = xhr.responseText;}}//获取上传的进度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为服务器请求地址，true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror = uploadFailed; //请求失败xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】xhr.upload.onloadstart = function () {//上传开始执行方法ot = new Date().getTime(); //设置上传开始时间oloaded = 0; //设置上传开始时，以上传的文件大小为0};xhr.send(form); //开始上传，发送form数据}//上传成功响应function uploadComplete(evt) {//服务断接收完文件返回的结果var data = JSON.parse(evt.target.responseText);if (data.success) {alert("上传成功！");} else {alert("上传失败！");}}//上传失败function uploadFailed(evt) {alert("上传失败！");}//取消上传function cancleUploadFile() {xhr.abort();}//上传进度实现方法，上传过程中会频繁调用该方法function progressFunction(evt) {var progressBar = document.getElementById("progressBar");var percentageDiv = document.getElementById("percentage");// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果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(); //获取当前时间var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算//上传速度计算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

js 文件上传图片上传传输速度计算相关推荐

文件上传(图片上传) 大小限制的配置及注意点
文件上传(图片上传) 设置大小注意点 //检查文件是否为空if (multipartFile.isEmpty()){return "文件为空";}//检查文件大小 209715 ...
淘宝店铺上新图片上传获取请求方法
淘宝上新图片上传获取请求方法如下: 1.请求方法:POST [支持高并发同时请求] 点击获取请求key和secret Headers: 参数名称参数值是否必须示例备注 Content-Type ...
server2008网卡驱动包_从网卡发送数据再谈TCP/IP协议—网络传输速度计算-网卡构造...
在<在深谈TCP/IP三步握手&四步挥手原理及衍生问题-长文解剖IP>里面提到单个TCP包每次打包1448字节的数据进行发送(以太网Ethernet最大的数据帧是1518字节,以 ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
js+php在线截图 jquery fileupload.js,另一种图片上传 jquery.fileupload.js
今天遇到另外一种上传图片方法用jquery.fileupload.js 一个文件类型的元素 $("#fileupload").fileupload({ datatype:&quo ...
moba上传文件到服务器,图片上传到远程服务器上的方法
图片上传到远程服务器上的方法内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows ...
PPTPDF文件转换成图片上传OSS
PPTPDFIMAGE 先把文件上传至本地,再去读取文件转变上传. <dependency><groupId>org.apache.pdfbox</groupId> ...
Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
h5 ajax php 图片上传,图片上传生成海报H5技术详解
我想很多经常做H5同学都会遇到过让用户上传照片的这种需求,那我这里给大家分享一些我常用的一些方法~废话不多时候,下面可以写一些干货,如果有更好的方法欢迎留言讨论! 首先,需要准备一些需要用到的东西. ...
ftp服务器可以异地传文件吗,FTP图片上传到异地服务器
#region 创建文件夹 MakeFolder() /// /// 创建文件夹 /// /// 例如:/newDir /// ftp地址(可带目录) /// ftp用户名 /// ftp密码 pu ...

js 文件上传图片上传传输速度计算

参考一：

参考二：

整理自 https://blog.csdn.net/weixin_41646716/article/details/90058189

js 文件上传图片上传传输速度计算相关推荐

最新文章

热门文章

js 文件上传 图片上传 传输速度计算

参考一：

参考二：

整理自 https://blog.csdn.net/weixin_41646716/article/details/90058189

js 文件上传 图片上传 传输速度计算相关推荐

最新文章

热门文章

js 文件上传图片上传传输速度计算

js 文件上传图片上传传输速度计算相关推荐