<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 条纹的进度条</title>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/css/fileinput.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/js/fileinput.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      alert("hello");
      $("#input-b2").change(function () {
        console.log("hi");
      });
      $("#input-b2").bind("change", function () {
        console.log("hello");
        var fileObj = document.getElementById("input-b2").files[0];
        var form = new FormData();
        form.append("file", fileObj);
        /*  $("#packUrlDiv").html("正在上传...");*/
        $.ajax({
          url: '上传服务地址',
          type: 'POST',
          data: form,
          cache: false,
          processData: false,
          contentType: false,
          xhr: xhrOnProgress(function (e) {
            var percentDouble = e.loaded / e.total;//文件上传百分比
            var percent = parseInt(percentDouble * 100);
            console.log(percent);
            if (percent <= 100) {
              $("#progressBarDiv").attr("style", "width:" + percent + "%");
              $("#progressBarDiv").html(percent + "%");
            } else {
            }
            console.log(percent);
          }),
          success: function (data) {
            console.log(data);
            var map = data;
            console.log(map.result.url);
          }
        })
      });
      var xhrOnProgress = function (fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
        //使用闭包实现监听绑
        return function () {
          //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
          var xhr = $.ajaxSettings.xhr();
          //判断监听函数是否为函数
          if (typeof xhrOnProgress.onprogress !== 'function')
            return xhr;
          //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
          if (xhrOnProgress.onprogress && xhr.upload) {
            xhr.upload.onprogress = xhrOnProgress.onprogress;
          }
          return xhr;
        }
      }
    });

  </script>
</head>
<body>
<input id="input-b2" name="input-b2" type="file" showPreview="false" class="file" data-browse-on-zone-click="true">
<button id="btnUp" name="btnUp" type="button" class="btn btn-primary">上传</button>
<button type="button" class="btn btn-primary">原始</button>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 0%;" id="progressBarDiv">
    <span class="sr-only"></span>
  </div>
</div>

</body>
</html>

上传图片 展示进度条 bootstrap的更多相关文章

  1. html上传图片（进度条变化）、音乐

    <html> <head> <title>$Title$</title> </head> <link href="css/b ...

  2. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  3. Bootstrap学习 进度条

    本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条 bootstrap进度条使用CSS3过渡和动画来获得该效果.Internet Expl ...

  4. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  5. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  6. 用css2属性clip实现网页进度条

    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...

  7. mui 滑块开关 进度条 以及如何获取值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. ios开发之--给WebView加载进度条

    不是新东西,就是在项目里面用到H5页面的时候,中间加载延迟的时候,在最上面加载一个进度条,代码如下: // 获取屏幕 宽度.高度 bounds就是屏幕的全部区域 #define KDeviceWidt ...

  9. iOS WKWebView添加网页加载进度条(转)

    一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...

随机推荐

  1. 如何给SAP云平台购买的账号分配Process Integration服务

    在云平台控制台里,给global Account分配Integration Suite下面的Process Integration的API和Runtime两种服务: Process Integrati ...

  2. CentOS 使用163yum源

    下载163源 # wget http://mirrors.163.com/.help/CentOS7-Base-163.repo 如果报以下错误 -bash: wget: command not fo ...

  3. 如何用 DHCP + DNS + Web 实现一个网络架构

    为什么?为什么?为什么在浏览器里输入www.baidu.com就可以访问百度搜索,而输入pan.baidu.com就可以访问百度网盘,它是怎么实现的? 实验原理简介 在Internet中,计算机之间通 ...

  4. app开发-1

    一.了解HBuilder HBuilder内封装了大量的书籍,极大方便了使用 官方文档: http://dev.dcloud.net.cn/mui/ui/ 关于布局: mhead  表头.mbody ...

  5. netstat -an unix socket 会阻塞吗

    [lyd@localhost ~]$ netstat -an | grep "SOFO"unix 2 [ ACC ] SEQPACKET LISTENING 86308 @*MY- ...

  6. HDU4091：Zombie’s Treasure Chest （分类-数学）

    题意:给两种宝石,体积S1,S2,价值V1,V2,背包容量n,求最大收益. 所有数据都在32位整数范围内. 思路:只有两种物品的背包,显然不是常见的背包,应该从背包之外的思路下手. 1:可以猜想其中一 ...

  7. Linux——查询服务器公网IP

    前言 服务器查看IP,十分简单,但是如何查看公网IP呢? 步骤 网站:http://www.cip.cc/ 命令行查询(详细): UNIX/Linux: #curl cip.cc Windows: & ...

  8. AndroidStudio中Flutter打包APK

    1.生成签名文件 在打包之前我们需要一个签名文件,证明文件的唯一性. keytool -genkey -v -keystore F:\APP\sign.jks -keyalg RSA -keysize ...

  9. Python面向对象 -- slots, @property、多重继承MixIn、定制类（str, iter, getitem, getattr, call, callable函数，可调用对象）、元类（type, metaclass）

    面向对象设计中最基础的3个概念:数据封装.继承和多态 动态给class增加功能 正常情况下,当定义了一个class,然后创建了一个class的实例后,可以在程序运行的过程中给该实例绑定任何属性和方法, ...

  10. vault 使用 中间ca 进行证书管理

    使用vault 进行pki 管理是很方便的,以前测试的都是由根证书进行证书签发,这次使用中间ca 进行签发 所以会有一个证书连 测试使用docker-compose 运行 环境准备 docker-co ...