根据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. ORACLE 几个我忍了他很多年的问题

    ① DataGuard环境,主库创建的临时文件,不在备库上创建 ② 创建11G R2 Rac环境时,在RHEL 6.0及以后版本上,最后执行root.sh命令时,以及重新启动OS后启动ohasd,都需 ...

  2. Sql Server数据库监听 c#代码

    using AnfiniL.SqlServerTools.Data; using SqlServerTools; using SqlServerTools.Data; using System; us ...

  3. C# webbrowser判断页面是否加载完毕

    private void Form1_Load(object sender, EventArgs e) { webalipay.Url = new Uri("https://authzth. ...

  4. 【Intel AF 2.1 学习笔记二】AF中的页面——Panel

    Panel Panel控件是你的app中的独立内容的区域控件.它是af UI的核心.Panel div 元素实际上承载了app中你管理和显示的界面元素和内容. 创建panel控件是相当地容易的:在id ...

  5. 【WP8】让TextBox文本支持滑动（Scroll）

    通过修改样式让TextBox支持文本滑动 在Silverlight上,TextBox是有文本滚动的功能的,当TextBox的文本过长时,可以进行拖动的,TextBox使用 VerticalScroll ...

  6. 使用 CGContextRef 进行简单内容绘制

    摘要 : CGContextRef 功能强大,我们借助它可以画各种图形.这里所举例子只是简单内容绘制,冰山一角,对此感兴趣的朋友可以举一反三,实现各种酷炫效果. 效果如下: KMDrawView.h ...

  7. jenkins 启动slave，出现com.sun.deploy.net.FailedDownloadException: Unable to load resource: http://127.0.0.1:8080/jnlpJars/remoting.jar

    master: linux slave: win7 64位系统 在配置好系统后,采用jnlp的方式启动slave节点,报错如下: com.sun.deploy.net.FailedDownloadEx ...

  8. CorelDRAW中如何分布对象

    分布对象功能主要用来控制选择对象之间的距离,可以满足用户对均匀间距的要求,通常用于选择三个或三个以上的物体,将他们之间的距离平均分布.本教程将详解CorelDRAW中关于分布对象的操作. CorelD ...

  9. python获取数组中最多的元素

    获取数组中数量最多的元素,也就是最频繁的那个元素,方法有很多,下面是3种最简单的: 用max函数 sample = [1,2,3,3,3,4,5,5] max(set(sample), key=sam ...

  10. python中，如有个非常长的字符串，在写的时候如何将其分隔

    说明: 比如,有个长字符串,Put several strings within parentheses to have them joined together.但是我在写脚本的时候, 想要放在多行 ...