bs-loading

根据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的更多相关文章

用贪心算法近似求解 Loading Balance 问题(作业调度的负载均衡)
一,Loading Balance 问题描述:有 m 台相同的机器及 n 个作业,其中 m={M(1),M(2),……M(m)}.n = {J(1),J(2),……J(n)}.每个作业都有一个处理时间 ...
步入angularjs directive（指令）--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
C# BS消息推送 SignalR介绍（一）
1. 前言本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 介绍 1)SignalR能用来持久客户端与服务端的连接,让我们便于开发一些实时的应用,例如聊天室在 ...
Atitit 软件架构方法的进化与演进cs bs soa roa msa attilax总结
Atitit 软件架构方法的进化与演进cs bs soa roa msa attilax总结 1.1. 软件体系架构是沿着单机到 CS 架构,再到 BS 的三层架构甚至多层架构逐步发展过来的,关于 ...
eclipse 突然一直在loading descriptor for XXX (XXX为工程名)Cancel Requested
问题: eclipse 启动后,啥也不干,就一直在loading descriptor for XXX (XXX为工程名),,其他什么操作都不能操作. 如下图所示,保存文件也无法保存. 这个怎么办? ...
linux使用wkhtmltopdf报错error while loading shared libraries:
官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...
solr定时更新索引遇到的问题（SolrDataImportProperties Error loading DataImportScheduler properties java.lang.NullPointerException）
问题描述报如下错误,很显然,问题原因:空指针异常: ERROR (localhost-startStop-1) [ ] o.a.s.h.d.s.SolrDataImportProperties ...
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 ...
x01.os.21: print "Loading..."
Linux Inside 是中文版,值得下载一读. 先把目标设低点,开机进入后,在屏幕上打印“Loading..."即可.由于要在 bochs 中运行,首先就是安装 bochs.Oldlin ...

随机推荐

VMware克隆虚拟机后无法启动网卡
最简单的办法: 修改这个文件:/etc/udev/rules.d/70_persistent-net.rules 把eth1修改为eth0,记下里面的mac地址修改/etc/sysconfig/ne ...
C# ThreadStart和ParameterizedThreadStart区别
ThreadStart: ThreadStart这个委托定义为void ThreadStart(),也就是说,所执行的方法不能有参数.ThreadStart threadStart=new Threa ...
categorys
//spark-shell --driver-class-path /home/hadoop/test/mysqljdbc.jarimport java.sql.DriverManager// --q ...
《构建高性能web站点》读书笔记：CPU/IO并发策略
服务器并发处理能力:单位时间内处理的请求数,吞吐率,reqs/s apache的mod_status,显示的 requests/sec,从启动开始的平均计算值.lighttpd的mod_status显 ...
windows mongodb最常用命令简单归纳
在windows安装好了windows,首先记得要把mongodb bin目录路径放在系统环境变量的path中,确定之后即配置好了mongo的环境变量,在dos命令框中输入mongo会出现如下版本 ...
php5.4转5.3被替换的函数
今天服务器由于业务需求,需要换成php5.4版本,以前使用的5.3,有些函数过期,导致了许多问题 1.ereg() 使用 preg_match() 替代 int preg_match ( string ...
VCard介绍
91助手和豌豆荚用VCard来存储通讯录,今天调查了一下. 1. 方案使用VCard存储通讯录,文件扩展名为 vcf, 数据文件可以直接导入IPhone/Windows Phone/android ...
spring核心之AOP学习总结二
一:springAOP常用的注解 @Aspect:声明方面组件 @Before:声明前置通知 @After-returning:声明后置通知 @After:声明最终通知 @Around:声明环绕通知 ...
一个非常好的C#字符串操作处理类StringHelper.cs
/// <summary> /// 类说明:Assistant /// 编码人:苏飞 /// 联系方式:361983679 /// 更新网站:http://www.sufeinet.c ...
R语言概述
R是一个有着统计分析功能及强大作图功能的软件系统,是由Ross Ihaka和Robert Gentleman共同创立.它是属于GNU系统的一个自由.免费.源码开放的软件,同一时候也是一个用于统计计算和 ...

bs-loading

bs-loading的更多相关文章

随机推荐

热门专题