根据bootstrap的modal来显示loading动效。

核心内容：

1.图片转base64方法；

// 图片压缩-start

function run(input_file,get_data){

    /*input_file：文件按钮对象*/

    /*get_data: 转换成功后执行的方法*/

    if ( typeof(FileReader) === 'undefined' ){

        alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");

    } else {

        try{

            /*图片转Base64 核心代码*/

            var file = input_file.files[0];

            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

            if(!/image\/\w+/.test(file.type)){

                alert("请确保文件为图像类型");

                return false;

            }

            var reader = new FileReader();

            reader.onload = function(){

                get_data(this.result);

            };

            reader.readAsDataURL(file);

        }catch (e){

        }

    }

}

// 图片压缩-end

使用：

<input type="file" class="up-btn" id="u-btn1">
    //上传照片

    $("#u-btn1").change(function () {

        //转bese64

        run(this, function (bs_img) {

            console.log(bs_img);

        });

    });

2，modal垂直居中方法：

//modal垂直居中-start

function centerModals() {

    $('#loadModal').each(function(i) {

        var $clone = $(this).clone().css('display','block').appendTo('body');

        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);

        top = top > 0 ? top : 0;

        $clone.remove();

        $(this).find('.modal-content').css("margin-top", top);

    });

}

//modal垂直居中-end

使用方法：

$('#loadModal').on('show.bs.modal', centerModals);

$(function(){

    //页面大小变化是仍然保证模态框水平垂直居中

    $(window).on('resize', centerModals);

})

3，modal的lodaling结构：

<!-- modal-loading-start -->

    <div class="modal fade" id="loadModal">

        <div class="modal-dialog">

            <div class="modal-content">

              <img class="center-block" alt="" src="data:image/gif;base64,R0lGODlhGQAZAJECAK7PTQBjpv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUNGNUFGRUFGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUNGNUFGRTlGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjI1NDg2LTZkZWQtMjY0NS04MTAzLWQ3Yzg4MTg5YzExNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFCgACACwAAAAAGQAZAAACTpSPqcu9AKMUodqLpAb0+rxFnWeBIUdixwmNqRm6JLzJ38raqsGiaUXT6EqO4uIHRAYQyiHw0GxCkc7l9FdlUqWGKPX64mbFXqzxjDYWAAAh+QQFCgACACwCAAIAFQAKAAACHYyPAsuNH1SbME1ajbwra854Edh5GyeeV0oCLFkAACH5BAUKAAIALA0AAgAKABUAAAIUjI+py+0PYxO0WoCz3rz7D4bi+BUAIfkEBQoAAgAsAgANABUACgAAAh2EjxLLjQ9UmzBNWo28K2vOeBHYeRsnnldKBixZAAA7" />

            </div>

        </div>

    </div>

<!-- modal-loading-end -->

案例完整源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">

<style>

    .modal-content {

        background-color: transparent;

        box-shadow: none;

        border:none;

    }

    .file-box{

        width:200px;

    }

    .u-img {

        width:100%;

        vertical-align: middle;

    }

    .up-btn {

        display:block;

        position: absolute;

        display: block;

        width:200px;

        /* width: 100%; */

        height: 100%;

        opacity: 0;

        filter: alpha(opacity=0);

    }

</style>

</head>

<body>

        <form action="" role="form" class="form-horizontal enter1form">

            <div class="row enter-uploader">

                <div class="col-sm-6">

                  <span><span style="color:red">*</span>照片：</span>

                  <!-- <input type="hidden" id="btnid7" name="btnid7">

                  <input type="hidden" id="btnfile7" name="btnfile7"> -->

                  <input type="file" class="up-btn" id="u-btn1">

                  <div class="file-box">

                      <img id="file-img7" class="u-img" src="enter01.png" alt="">

                  </div>

                </div>

                <div class="col-sm-6">

                    <img id="up-img" class="u-img">

                </div>

            </div>

        </form>

        <h1>base64</h1>

        <textarea  style="display: block; width: 100%;height: 30em;"></textarea>

<!-- modal-loading-start -->

    <div class="modal fade" id="loadModal">

        <div class="modal-dialog">

            <div class="modal-content">

              <img class="center-block" alt="" src="data:image/gif;base64,R0lGODlhGQAZAJECAK7PTQBjpv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUNGNUFGRUFGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUNGNUFGRTlGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjI1NDg2LTZkZWQtMjY0NS04MTAzLWQ3Yzg4MTg5YzExNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFCgACACwAAAAAGQAZAAACTpSPqcu9AKMUodqLpAb0+rxFnWeBIUdixwmNqRm6JLzJ38raqsGiaUXT6EqO4uIHRAYQyiHw0GxCkc7l9FdlUqWGKPX64mbFXqzxjDYWAAAh+QQFCgACACwCAAIAFQAKAAACHYyPAsuNH1SbME1ajbwra854Edh5GyeeV0oCLFkAACH5BAUKAAIALA0AAgAKABUAAAIUjI+py+0PYxO0WoCz3rz7D4bi+BUAIfkEBQoAAgAsAgANABUACgAAAh2EjxLLjQ9UmzBNWo28K2vOeBHYeRsnnldKBixZAAA7" />

            </div>

        </div>

    </div>

<!-- modal-loading-end -->

</body>

</html>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

<script>

// 图片压缩-start

function run(input_file,get_data){

    /*input_file：文件按钮对象*/

    /*get_data: 转换成功后执行的方法*/

    if ( typeof(FileReader) === 'undefined' ){

        alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");

    } else {

        try{

            /*图片转Base64 核心代码*/

            var file = input_file.files[0];

            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

            if(!/image\/\w+/.test(file.type)){

                alert("请确保文件为图像类型");

                return false;

            }

            var reader = new FileReader();

            reader.onload = function(){

                get_data(this.result);

            };

            reader.readAsDataURL(file);

        }catch (e){

        }

    }

}

// 图片压缩-end

//modal垂直居中-start

function centerModals() {

    $('#loadModal').each(function(i) {

        var $clone = $(this).clone().css('display','block').appendTo('body');

        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);

        top = top > 0 ? top : 0;

        $clone.remove();

        $(this).find('.modal-content').css("margin-top", top);

    });

}

//modal垂直居中-end

// 隐藏loading

function hideModal(){

    $('#loadModal').modal('hide');

}

// 显示loading

function showModal(){

    $('#loadModal').on('show.bs.modal', centerModals);

    $('#loadModal').modal({backdrop:'static',keyboard:false,show:true});

}

//modal垂直居中-end

$(function(){

    //页面大小变化是仍然保证模态框水平垂直居中

    $(window).on('resize', centerModals);

    //上传照片

    $("#u-btn1").change(function () {

        //转bese64

        run(this, function (bs_img) {

            $('#up-img').attr('src',bs_img);

            $('textarea').val(bs_img);

            console.log(bs_img);

            showModal();

            $.ajax({

                type: "POST",

                data:{base64_img:bs_img},

                url: "",

                dataType: "json",

                beforeSend: function(){

                    showModal();

                },

                success: function(data){

                    if (data){

                        hideModal();

                    }else{

                        hideModal();

                    }

                }

            });

        });

    });

})

</script>

预览地址：

https://besswang.github.io/bs-loading/index.html

bs-loading的更多相关文章

  1. 用贪心算法近似求解 Loading Balance 问题(作业调度的负载均衡)

    一,Loading Balance 问题描述:有 m 台相同的机器及 n 个作业,其中 m={M(1),M(2),……M(m)}.n = {J(1),J(2),……J(n)}.每个作业都有一个处理时间 ...

  2. 步入angularjs directive（指令）--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  3. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  4. C# BS消息推送 SignalR介绍（一）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 介绍 1)SignalR能用来持久客户端与服务端的连接,让我们便于开发一些实时的应用,例如聊天室在 ...

  5. Atitit 软件架构方法的进化与演进cs bs soa roa  msa  attilax总结

    Atitit 软件架构方法的进化与演进cs bs soa roa  msa  attilax总结 1.1. 软件体系架构是沿着单机到 CS 架构,再到 BS 的三层架构甚至多层架构逐步发展过来的,关于 ...

  6. eclipse 突然 一直在loading descriptor for XXX (XXX为工程名)Cancel Requested

    问题: eclipse 启动后,啥也不干,就一直在loading descriptor for XXX (XXX为工程名),,其他什么操作都不能操作. 如下图所示,保存文件也无法保存.  这个怎么办? ...

  7. linux使用wkhtmltopdf报错error while loading shared libraries:

    官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...

  8. solr定时更新索引遇到的问题（SolrDataImportProperties Error loading DataImportScheduler properties java.lang.NullPointerException）

    问题描述 报如下错误,很显然,问题原因:空指针异常: ERROR (localhost-startStop-1) [   ] o.a.s.h.d.s.SolrDataImportProperties ...

  9. python3: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory

    安装python3遇到报错: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz ./configure --prefix=/u ...

  10. x01.os.21: print "Loading..."

    Linux Inside 是中文版,值得下载一读. 先把目标设低点,开机进入后,在屏幕上打印“Loading..."即可.由于要在 bochs 中运行,首先就是安装 bochs.Oldlin ...

随机推荐

  1. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  2. BarTender怎么打印公式化的三列标签

    有小伙伴在业务上有这样的需求:使用BarTender打印一行三列的标签,如下A,B,C三个并排.第一行 A1=a B1=a*2-1 C1=a*2:第二行 A2=a+1 B2=(a+1)*2-1 C2= ...

  3. Spring的JdbcTemplate与其事务

    JdbcTemplate:http://lehsyh.iteye.com/blog/1579737 JdbcTemplate with TransactionTemplate:http://www.c ...

  4. Ubuntu下用matplotlib作图时显示中文

    之前在Ubuntu下用matplotlib作图的时候发现无法正常显示中文,查了一番以后发现是Ubuntu系统和matplotlib库没有共同可显示的中文字体库的原因.用此文章的方法可以解决这一问题. ...

  5. python中，如何将多行进行输出，同时将行尾的换行符去掉

    需求说明: 比如我要输出字符串的常量,字符串常量要输出多行,该怎么解决呢 操作过程: 1.可以通过三引号(""" .... """)将要输出 ...

  6. 让maven使用国内镜像和archetypeCatalog

    https://blog.csdn.net/zhang_red/article/details/54603530

  7. Strict Mode (JavaScript)

    摘要: ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言.但目 ...

  8. selenium chrome登陆手机 pc淘宝

    接口登录淘宝,困难度极高,没有人已经实现过. 淘宝登录selenium 手机版  pc版. 由于每天需要使用ip代理大批量的异地登录淘宝帐号,这种情况必然会出现淘宝滑动验证码,使用ActionChai ...

  9. 对象克隆技术Object.clone()

    Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象. 所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象. ...

  10. 如何删除一个CSDN上自己上传的资源

    原文地址:http://www.xuebuyuan.com/1875216.html 昨天晚上进行测试,上传了一个压缩包和大家分享,测试完成后,为了不想给被测试的公司造成伤害,决定把上传的包删除,结果 ...