js如何实现进度条(js进度条代码超简单)
使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网
js怎么实现进度条！
!DOCTYPE?"?
html?xmlns=""??
head?
title进度条/title?
style?type="text/css"?
??body{?
????text-align:center;?
??}?
??.graph{?
????width:450px;?
????border:1px?solid?#F8B3D0;?
????height:25px;?
??}?
??#bar{?
????????display:block;?
????????background:#FFE7F4;?
????????float:left;?
????????height:100%;?
????????text-align:center;?
????}?
????#barNum{?
????????position:absolute;?
????}?
/style?
script?type="text/javascript"?
function?$(obj){?//封装方法，相当于jQuery
????return?document.getElementById(obj);?
}?
function?go(){?
????$("bar").style.width?=?parseInt($("bar").style.width)?+?1?+?"%";?
????$("bar").innerHTML?=?$("bar").style.width;?
????if($("bar").style.width?==?"100%"){?
????????window.clearInterval(bar);?//进度为100时清除定时器
????}?
}?
var?bar?=?window.setInterval("go()",50);?//设置定时器
window.onload?=?function(){?
????bar;?
}?
/script?
/head?
body?
div?class="graph"?
strong?id="bar"?style="width:1%;"/strong?
/div?
/body?
/html
JS做的进度条，如何做的？
js其实是没法计算到网页的加载进度的。
目前见到的打开页面显示进度的有两种
1、如果是flash做的，那是flash自身的加载进度。
2、如果是js做的，做法比较简单，就是在页面的不同的地方插入script标签，动态改变进度的值。 ? ??
html
????head
????????script
????????var?processPer?=?0;
????????window.onload?=?function(){
????????????document.getElementById('process').innerHTML?=?processPer;
????????}
????????/script
????/head
????body
????????div?id="process"/div
????????div/div
????????....
????????script
????????processPer?=?30;
????????document.getElementById('process').innerHTML?=?processPer;
????????/script
????????div/div
????????....
????????div/div
????????....
????????script
????????processPer?=?100;
????????document.getElementById('process').innerHTML?=?processPer;
????????/script
????/body
/html
类似这样的，就可以实现了进度的动态改变。