上传文件时显示进度条的代码

最新推荐文章于 2022-10-23 18:18:43 发布
最新推荐文章于 2022-10-23 18:18:43 发布
阅读量1.5k 收藏
点赞数
分类专栏： javascript 文章标签： 上传文件 进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36341800/article/details/54619038
版权

1.代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>



<script type="text/javascript">
//下载时检测网络环境并显示下载进度
if(/android/i/.test(navigator.userAgent)) {//判断为android


}else if(/ipad | iphone/i.test(navigator.userAgent)){//判断为ios
//移除按钮
} else {
//pc端访问，移除按钮 
}
mui.plusReady(function(){
//获取当前网络状态的函数
function GetNetWorkState() {
var NetStateStr = '未知';
var types = {};
types[plus.networkinfo.CONNECTION_UNKNOW] = '未知';
types[plus.networkinfo.CONNECTION_NONE] = '未连接网络';
types[plus.networkinfo.CONNECTION_ETHERNET] = '有线网络';
types[plus.networkinfo.CONNECTION_WIFI] = 'WiFi网络';
types[plus.networkinfo.CONNECTION_CELL2G] = '2G蜂窝网络';
types[plus.networkinfo.CONNECTION_CELL3G] = '3G蜂窝网络';
types[plus.networkinfo.CONNECTION_CELL4G] = '4G蜂窝网络';
NetStateStr = types[plus.networkinfo.getCurrentType()];

return NetStateStr;
};
//创建下载任务
window.createDownload() {

if(GetNetWorkState()=="未连接网络" || GetNetWorkState()=="未知") {
plus.nativeUI.alert("网络状况不佳，请检查网络设置");
return;
}else if(GetNetWorkState()=="有线网络" || GetNetWorkState()=="3G蜂窝网络" || GetNetWorkState()=="2G蜂窝网络" || GetNetWorkState()=="4G蜂窝网络") {
mui.confirm('非wifi环境下确定下载？','提示',['取消','确定'], function(e) {
if(e.index == 1) {
startDownload();
}
})
}else{
startDowanload();
}
}

//下载并显示下载进度的函数
function startDownload() {
document.getElementById("jindu").style.display = "block";
document.getElementById("download").innerHTML = "安装中";
var dtask = plus.downloader.createDownload("utrl",{},function (d,status) {
//下载完成
if(status == 200) {
d.filename = d.filename;
document.getElementById("download").onclick = function() {
plus.runtime.openFile(d.filename);
}
} else {
plus.nativeUI.alert("下载失败！");
}
});
//调用显示进度的函数
range("url");
dtask.start();
}

//取消下载任务
document.getElementById('gameOver').onclick = function () {

}

var req = new XMLHttpRequest();
function range(url) {
var percentComplete;
req.addEventListener("progress", function(event) {
if(event.lengthComputable) {
percentComplete = parseFloat((event.loaded / event.total) * 100).toFixed(0);
document.getElementById('jindu').innerHTML = "(" + percentComplete +"%)";
if(document.getElementById("jindu").innerHTML == "(100%)") { 
document.getElementById("download").innerHTML = "打开"; 
   document.getElementById("gameOver").style.display = "none";
 
}
}
},false);
req.open("GET",url);
req.send();
}
function stop() {
req.abort(); //终止XMLHttpRequest对象
window.stop();

}

});

</script> 
</body>
</html>



frontEnd-Engineer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文件上传进度条
qq_40838769的博客
11-18 180
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge...
C#进度条显示上传文件代码
12-20 1584
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using
ASP.NET Ajax 带进度条文件上传示例
10-25
我自己写的Ajax带进度条文件上传，IE8、Opra、FireFox测试可用，完全开源，非控件，代码和原理都非常简洁(VS2010项目文件)。 仅供个人使用学习之用。 严禁转截至各种源码下载网站。
springboot：实现文件上传下载实时进度条功能【附带源码】
55555的博客
10-23 1万+
记得刚入行的时候，做了一个文件上传的功能，因为上传时间较久，为了用户友好性，想要添加一个实时进度条，显示进度。奈何当时技术有限，查了许久也没用找到解决方案，最后不了了之。 近来偶然想到这个问题，于是决定整理一下实现方式，也为和我曾经一样碰壁的同学，提供一些思路。
html5 fileupload控件进度条,jQuery文件上传插件jQuery Upload File 有上传进度条(示例代码)...
weixin_33595935的博客
06-09 370
jQuery文件上传插件jQuery Upload File，插件使用简单，支持单文件和多文件上传，支持文件拖拽上传，有进度条显示。标准HTML form文件上传，也就是说，只要服务端支持接收multipart/form-data格式数据就能使用此上传插件。本站web端文件文件提交即使用此插件，效果如下：浏览器支持浏览器支持：IE 8.0,IE 9.0,IE 10.0,Firefox,Safari...
同时上传多个文件实现，带进度条（完整代码）
风团团
09-12 2938
单文件上传 先简单来定义一个表单，注意加enctype=“multipart/form-data”，表示是上传组件 <form enctype="multipart/form-data" id="formData"> MultipartFile:<input type="file" name="file" id="fileName1"/><br> <div id="progress">0%</div> <input i
Ftp上传下载文件，并能自定义进度条展示(FtpClient)
热门推荐
怀念今天的专栏
02-14 1万+
前一段时间，自己写了一个java项目发布在一个免费的java平台上但是该平台给项目的是虚拟路径并不能上传文件。后来想到应用ftp作为上传文件的存储器。 ftp上传的工具类有sun（sun.net.*）和apache（org.apache.commons.net.ftp.*  这个需要在项目中加载commons-net-1.4.1.jar包）。这次我提供的是基于FtpClient（sun）实现的上
layui文件上传带进度条显示.zip
12-17
本资源"layui文件上传带进度条显示.zip"结合了`layui`与`PHP`，实现了文件上传过程中带有进度条的交互效果，提升了用户体验。 首先，我们要理解`layui`的文件上传组件是如何工作的。`layui`的上传组件基于HTML5的`...
原生JS上传大文件显示进度条 php上传文件代码
11-27
JS原生上传大文件显示进度条，php上传文件，供大家参考，具体内容如下 在php.ini修改需要的大小： upload_max_filesize = 8M  post_max_size = 10M  memory_limit = 20M  <!DOCTYPE html> <html> &lt...
Struts2实现文件上传时显示进度条功能
08-30
首先，要实现在上传文件时显示进度条，我们需要获取到文件上传的实时信息，即已经上传了多少字节以及文件的总大小。这通常通过在服务器端添加一个监听器来完成。在Struts2中，我们可以利用Apache Commons FileUpload...
FTP同时上传多个文件并显示进度条
10-08
FTP同时上传多个文件，同时显示进度条，采用异步线程的方式，不过也是参考高手的实例
FTPUpload上传文件 进度条显示进度
06-12
java FTP上传文件（进度条显示进度）
FTP上传实例（带进度条）
07-26
带进度条的文件上传下载样例，其中带有封装好的ftp帮助类，可以将其复制出来应用到其他项目中。
ajax实现上传文件时显示进度条的功能
08-14
实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。 源码结构说明 1.FileUpload文件夹下为源文件 2.FileUpload.war为部署文件 已经试过运行正常
java大文件上传至ftp服务器带进度条显示的
11-20
java大文件上传至ftp服务器带进度条显示的，进度条的显示和ftp的上传速度同步，解决了进度条显示和ftp不同步的问题
JavaScript载入文件并显示进度条代码.rar
07-10
这个名为"JavaScript载入文件并显示进度条代码.rar"的压缩包包含了一个实现这一功能的解决方案。它利用JavaScript技术和Flash技术，为文件加载过程添加了实时的进度条展示，虽然不是针对文件上传的进度跟踪，但对...
ftp服务器如何显示上传进度,ftp上传进度条服务器
weixin_29759387的博客
08-09 1051
ftp上传进度条服务器 内容精选换一换通过FusionDirector可以批量为服务器卸载HA软件。FusionDirector已纳管服务器。检查设备和软件信息，可以根据业务需求在“高级搜索”中自定义选择卸载范围。完成后可在计划管理界面查看卸载状态等信息。CDM支持周期性自动将新增文件上传到OBS，不需要写代码，也不需要用户频繁手动上传即可使用OBS的海量存储能力进行文件备份。这里以CDM周期性备...
vue上传文件并显示进度条
IT菜鸟
07-29 1万+
keepFileList 用来备份选择的文件列表，因取消下载后文件列表会被清空，导致不能继续上传。手动使用submit()上传。
el-upload自定义上传文件显示进度条
The One Who's at the Front
09-20 1万+
el-upload自定义上传文件时需要显示进度条，但使用会覆盖默认的上传行为，也就不生效了，所以可以自定义上传的实现。 数据 事件 导入接口 接口方法 uploadEvent
Ajax上传文件并显示进度条
最新发布
06-03
要实现Ajax上传文件并显示进度条，您可以使用FormData对象和XMLHttpRequest对象。以下是一个简单的示例代码： HTML代码： ``` 上传文件 <div id="progress-bar"></div> ``` JavaScript代码： ``` var form ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值