根据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. kafka基本概念

    介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafka将消息以to ...

  2. 配置Server.xml

    Service下面的Connector, Engine, Executor. 组件的目录结构,配置文件,配置节点.

  3. VCL 中的 Windows API 函数(5): AlphaBlend

    AlphaBlend 是指定图像混合透明的函数, 在 Graphics.GraphUtil.RibbonStyleActnCtrls 单元用到. 下面的测试是把一张图片显示在窗体, 并可以调整透明度. ...

  4. vs技巧总结

    工欲善其事,必先利其器,作为一个优秀的程序员很重要的一点就是要善用工具.最近专注于工具开发的我,最近觉得工具的使用,站在巨人的肩膀上进行劳作,而不是不断的造轮子,是非常重要的. 时间最贵,因为对于每个 ...

  5. org.apache.http.client.methods.HttpGet 转到定义找不到源代码

    例如 org.apache.http.client.methods.HttpGet ,提示没有源码 到这里下载 http://hc.apache.org/downloads.cgi Source 4. ...

  6. springmvc表单验证

    http://blog.csdn.net/daryl715/article/details/1645880 http://blog.csdn.net/shuwei003/article/details ...

  7. Linux下的ssh远程访问

    准备工作:首先需要在windows系统中安装虚拟机,并在虚拟机中安装好linux操作系统,这里安装的是vmware player虚拟机和ubuntu版本的操作系统.关于该部分的安装在作者的其他经验中有 ...

  8. 系统安装SQL Sever2000后1433端口未开放，如何打开1433端口的解决方法

    这篇文章主要针对Win2003系统安装SQL Sever2000后1433端口未开放,如何打开1433端口的解决方法. 用了几年的Windows2003和SQL Server2000了,不过这个问题倒 ...

  9. Innodb表压缩过程中遇到的坑（innodb_file_format）

    https://www.cnblogs.com/billyxp/p/3342969.html

  10. nginx配置设置，使部分页面访问跳转到404页面

    location ~* /(ask|hospital|wenda|regsearch|user|doctor) { return ; } error_page /.html;