jQuery NProgress.js加载进度插件的简单使用方法

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) {

            }
        })
    });