上传文件进度条(笔记)
参考资料:CSDN-真实的上传进度条
<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module"> <label class='col-sm-2 control-label'>上传进度:</label> <div class='col-sm-10'> <div class="progress"> <div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" > </div> </div> <span id="percentage"></span><span id="time"></span> </div> </div>
var ot; var oloaded; function save() { var form = new FormData(); var file = document.querySelector('input[type=file]').files[0]; form.append('logo', file); //angular 上传的文件必须使用特殊的格式处理,不是json格式 var xhr; xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 xhr.open("post", webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", 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 response = JSON.parse(evt.target.responseText); if (response.mark) //接口返回的数据标志位,是否保存成功,保存成功则把文件相对地址更新到实体中 $scope.editdata.SourceURL = response.result; $('#txtSourceURL').click();//手动触发点击事件,刷新文本框的值 } //上传失败 function uploadFailed(evt) { toaster.pop('error', "上传失败"); } //上传进度实现方法,上传过程中会频繁调用该方法 function progressFunction(evt) { // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0 if (evt.lengthComputable) { $("#myModal_add_progressBar").css("width", Math.round(evt.loaded / evt.total * 100) + "%"); $("#myModal_add_progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%"); $("#percentage").html("已上传" + Math.round(evt.loaded / evt.total * 100) + "%"); } var nt = new Date().getTime();//获取当前时间 var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差,单位为s ot = new Date().getTime(); //重新赋值时间,用于下次计算 var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算 //上传速度计算 var speed = perload / pertime;//单位b/s var 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").html(',速度:' + speed + units + ',剩余时间:' + resttime + 's'); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2017-12-03 c# AutoMapper 使用方式