根据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. Throwable vs Exception

    Throwable中的Error是不需要程序处理的. Exception是需要处理的.

  2. 利用neon技术对矩阵旋转进行加速

    一般的矩阵旋转操作都是对矩阵中的元素逐个操作,假设矩阵大小为m*n,那么时间复杂度就是o(mn).如果使用了arm公司提供的neon加速技术,则可以并行的读取多个元素,对多个元素进行操作,虽然时间复杂 ...

  3. MVC Controller向View传递数据

    ASP.NET MVC中,Controller向View传递数据的方式有一下6种 ViewData ViewBag PartialView TempData ViewModel Tuple 1.Vie ...

  4. Java基础之深入理解Class对象与反射机制

    深入理解Class对象 RRIT及Class对象的概念 RRIT(Run-Time Type Identification)运行时类型识别.在<Thinking in Java>一书第十四 ...

  5. level 6 - unit3 -- 非限制性定语从句

    非限制性定语从句 例子1 he has a son who is a fireman who 引导一个定语从句. who 是修饰前面的son. 翻译的意思:他有一个消防员的儿子 he has a so ...

  6. QT基础：QMainWindow学习小结

    简述 普通的桌面应用程序有个共同的特性,有菜单栏.工具栏.状态栏.中央窗口等部件.菜单栏其实可以看成是一个窗口,菜单栏中的每一个菜单也可以看成一个窗口,每个部件基本都可以认为是一个窗口.那么这些典型的 ...

  7. 百度云高速下载Pandownload

    对于一些文件大小比较小的文件,可以直接在网页分享中点击[下载]来下载: 但是,对于较大点的文件,点击[下载]会弹出百度云的桌面客户端软件来下载: 但但是,下载速度实在是太慢了,强迫症真真等不及啊~ 幸 ...

  8. Bootstrap——网站添加字体图标

    @font-face { font-family: 'itcast'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype ...

  9. Java动态代理和静态代理区别

    静态代理 package staticproxy; /** * 接口 * @author newtouch * */ public interface IHello { public void say ...

  10. centos7 安装keepalived

    node1 192.168.5.101 node2 192.168.5.102 1.安装 openssl openssl-devel yum install openssl openssl-devel ...