<html xmlns="http://www.w3.org/1999/xhtml" >
<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>
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)]
更多用法可以 参考官网
需要计算分析文件进度，转成百分比，动态变更progress-bar的width<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
60%
</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）