<!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. 【TTS】传输表空间Linux asm -> AIX asm

    [TTS]传输表空间Linux asm -> AIX asm 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌 ...

  2. day 10 预科

    目录 IPO 编程 面向对象编程 类和对象 对象 类 定义类 定义对象 定义类语法 定义对象 (实例化对象) 定制对象独有特征 LeetCode检测机制 面向过程编程:面向(对着)-->过程(流 ...

  3. Centos7搭建DockerRegistry

    1. 说明 以下使用系统centos7,64位,镜像为CentOS-7-x86_64-Minimal-1804,均已root用户进行操作 2. 安装Registry Docker Registry 是 ...

  4. 06-jQuery进阶

    本篇主要介绍jQuery的正则.冒泡事件.委托事件.以及DOM操作.JavaScript对象以及ajax等知识: 一.正则 简而言之,正则的规则无论是各种语言均是通用的,故其规则中的字符便不再介绍了, ...

  5. opencv图像阈值操作

    使用threshold方法和adaptivethreshold方法对图像进行阈值分割操作. 1.使用threshold方法,设置一个阈值,将大于阈值的值变换为最大值,小于阈值的值变换为0. #-*- ...

  6. Linux正则表达式、shell基础、文件查找及打包压缩

    Linux正则表达式.shell基础.文件查找及打包压缩 一.正则表达式 Linux正则表达式分为2类: 1.基本正则表达式(BRE) 2.扩展正则表达式(ERE) 两者的区别: 1.使用扩展正则表达 ...

  7. ThinkPHP支持的4种路由模式

    下面这个说法和示例,比较具有总结性.

  8. linux下写tomcat启动，重启的脚本

    启动: #bash/bin cd /finance/ LANG="en_US.UTF-8" export LANG /finance/tomcat8-finance/bin/cat ...

  9. asp.net 访问局域网共享文件

    最近有个项目ASP.NET的项目,要读写一个局域网里的共享文件夹上的文件,记录如下: 1.访问共享文件 在这里我定义了一个方法,SaveFileExist(filesrc,filename),这个方法 ...

  10. Pycharm中打开Terminal方式

    点击剪头的图标就可以在左侧出现Terminal