上传进度条

进度条大致有两类：

1：大概反映进度，称为简单的虚假进度条；

2：真实反映进度，是真正的进度条；

页面效果：

本文先实现的是简单的虚假进度条，真实的进度条实现待后续。

原理：

1、初始化，给定一个默认的进度值，默认总值100，当前进度5%；

2、用户选择了上传的文件后，获取文件总大小，作为进度条的总值，当前进度置为总值的10%；

3、用户点击保存后，开启进度条（开启计时器），增加的进度使用随机数。设置停止（关闭计时器）的阀值为总值的90%；

4、收到后台传来的保存成功的消息时，将进度条走到底（进度值置为总值，进度100%）。

备注：期间涉及到的所有数值全部取整。

html

<div class="modal inmodal fade" id="myModal_import" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only" id="close_myModal_import">Close</span></button>
<h4 class="modal-title">批量导入</h4>
</div>
<div class="modal-body">
<form class='form-horizontal' enctype="multipart/form-data" method="post">
<div class='form-group'>
<label class='col-sm-2 control-label'>xxx</label>
<div class='col-sm-10'>
<select class="form-control" name="xxx"></select>
</div>
</div>
<div class='form-group'>
<label class='col-sm-2 control-label'>选择压缩文件</label>
<div class='col-sm-10'>
<input type="file" name="file" id="bulkImport"/>
</div>
</div>
<div class='form-group' id="fileSizeModule" style="display: none;">
<label class='col-sm-2 control-label'>文件大小</label>
<div class='col-sm-10'>
<input type="text" class="form-control" name="fileSize"/>
</div>
</div>
<div class='form-group' style="display: none;" id="progressModule">
<label class='col-sm-2 control-label'>上传进度</label>
<div class='col-sm-10'>
<div class="progress">
<div id="progressBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%"></div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary saveBtn" type="submit">保存</button>
</div>
</div>
</div>

</div>

//用户点击批量导入重置批量导入模态框
$("#clickBulkImport").click(function(){
$("#fileSizeModule").css("display","none");
$("#progressModule").css("display","none");
$("#bulkImport").val("");
$("#fileSizeModule").find("input[name='fileSize']").val("");
$("#progressBar").attr("aria-valuemax","100");//kb
$("#progressBar").attr("aria-valuenow","5");
$("#progressBar").css("width","5%");
});

//用户选择了上传文件
$("#bulkImport").on('change', function( e ){
$("#fileSizeModule").css("display","block");
var fileSize = e.currentTarget.files[0].size;
var totalNum=Math.round(Number(fileSize)/1024);
$("#myModal_import").find("form input[name='fileSize']").val("大约"+totalNum+"KB");
});

//批量导入保存
$("#myModal_import").on("click",".saveBtn",function(){
var xxx = $("#myModal_import").find("select[name='xxx']").val();
var formData = new FormData($("#myModal_import form")[0]);
//console.log(formData);

//////////////////////////////显示进度条/////////////////////////
$("#progressModule").css("display","block");
var fileSize =$("#myModal_import").find("form input[name='fileSize']").val();
var totalNum=Math.round(Number(fileSize)/1024);
$("#progressBar").attr("aria-valuemax",totalNum);//kb
$("#progressBar").attr("aria-valuenow",Math.round(totalNum/10));
$("#progressBar").css("width",Math.round(totalNum/1000));

var stopRun=Math.round(totalNum/10*9);
var timer=setInterval(function(){
var randomNum=Math.round(Math.random()*10);
var oldNum=$("#progressBar").attr("aria-valuenow");
var newNum=oldNum + randomNum;
if(newNum < stopRun){
$("#progressBar").attr("aria-valuenow",newNum);
$("#progressBar").css("width",Math.round(newNum/100));
}else{
$("#progressBar").attr("aria-valuenow",stopRun);
$("#progressBar").css("width","90%");
clearInterval(timer);//停止计时器
}
},1000);
//////////////////////////////显示进度条/////////////////////////

$.ajax({
url:"xxxxx?xx="+xx,
type:"POST",
data:formData,
contentType:false,
processData:false,
success:function(res){
if(res.code==200){
$("#progressBar").attr("aria-valuenow",totalNum);
$("#progressBar").css("width","100%");
$("#progressModule").css("display","none");//隐藏进度条
//保存成功
parent.layer.msg('批量导入成功！', {icon: 1});
$("#close_myModal_import").click();//关闭模态框
var pageNum=1;
goPage(pageNum);
//location.assign(location);//仅刷新当前页
}else{
//保存失败
parent.layer.msg(res.msg);
}
}
});
});

猜你喜欢