NProgress是基于jquery的,且版本要 >1.8 。这篇文章主要介绍了NProgress.js加载进度插件的简单使用方法,需要的朋友可以参考下:
NProgress.js
说明: NProgress是基于jquery的,且版本要 >1.8
下载地址: https://github.com/rstacruz/nprogress
API:
NProgress.start() — 启动进度条
NProgress.set(0.4) — 将进度设置到具体的百分比位置
NProgress.inc() — 少量增加进度
NProgress.done() — 将进度条标为完成状态
使用步骤:
1. 引入
<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
<script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来
2. 使用场景一:页面加载的效果 开始页面加载开始进度条 页面加载好 结束进度条:
<em id="__mceDel"><script>
$(function() {
NProgress.start();
$(window).load(function() {
NProgress.done();
});
</script>
</em>
3.使用场景二:ajax发送的效果 开始发送开始进度条 成功后 结束进度条:
<script>
$(window).ajaxStart(function () {
NProgress.start();
});
$(window).ajaxStop(function () {
NProgress.done();
});
</script>
//技巧总结 此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/
总结
以上所述是小编给大家介绍的jQuery NProgress.js加载进度插件的简单使用方法,希望对大家有所帮助
jquery调用真实上传进度
$("#addVideoModal .btn-primary").click(function () {
var video = document.getElementById('videoFile').files[0]; //获取文件
var videoName = document.getElementById('videoName').value; //获取文件名称
if (videoName == null||videoName == ""){
$("#addVideoModal").modal('hide');
hasError("视频文件名称不能为空!");
return false;
}
if (video == undefined||video == ""){
$("#addVideoModal").modal('hide');
hasError("请选择要上传的视频文件!");
return false;
}
var file = video.name;
if (file.lastIndexOf('.')==-1){ //如果不存在"."
$("#addVideoModal").modal('hide');
hasError("路径不正确!");
return false;
}
var AllImgExt=".mp4|.mov|";
var extName = file.substring(file.lastIndexOf(".")+1).toLowerCase();//(把路径中的所有字母全部转换为小写)
if(AllImgExt.indexOf(extName+"|")==-1)
{
$("#addVideoModal").modal('hide');
ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件,当前文件类型为"+extName;
hasError(ErrMsg);
return false;
}
var videoType = extName; //获取文件类型
var formData = new FormData();
formData.append('video',video);
formData.append('videoName',videoName);
formData.append('type',videoType);
$(".btn-video-primary") .attr('disabled',true);
$(".btn-video-primary") .html('<i class="fa fa-plus-circle"></i>上传中...');
$("#addVideoModal").modal('hide');
NProgress.set(0);
$.ajax({
type: 'post',
data: formData,
//取消帮我们格式化数据,是什么就是什么
cache: false,
contentType: false,
processData: false,
url: "whdp/config/insertOverviewVideo.do",
xhr: function() { //ajax进度条,直接拿过去就可以用
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function (e) {
var loaded = e.loaded; //已经上传大小情况
var tot = e.total; //附件总大小
var per = loaded / tot; //已经上传的百分比
NProgress.set(per);
}, false);
return xhr;
}
},
success: function (result) {
//console.log(result);
if (result=="success") {
$(".btn-video-primary") .attr('disabled',false);
$(".btn-video-primary") .html('<i class="fa fa-plus-circle"></i> 添加视频文件');
NProgress.done();
getSuccess("修改成功!");
getOverviewVideo();
}
},
error: function(errorMsg) {
}
})
});