<!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. github-git clone 下载很慢的问题解决

    git clone下载很慢的问题: 下载到指定目录:git clone https://github.com/ChengWuOne/spring-cloud-demo.git D:/日常软件/GitH ...

  2. GDI双缓冲

    GDI双缓冲 翻译自Double buffering,原作者Dim_Yimma_H 语言:C (原文写的是C++,实际上是纯C) 推荐知识: 构建程序 函数 结构体 变量和条件语句 switch语句 ...

  3. 【Java并发编程之深入理解】Synchronized的使用

    原文:https://blog.csdn.net/zjy15203167987/article/details/82531772 1.为什么要使用synchronized 在并发编程中存在线程安全问题 ...

  4. Vue和微信小程序区别

    一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩 ...

  5. Centos7-Gnome安装

    查看grouplist yum grouplist 安装gnome yum groupinstall "GNOME Desktop" root用户权限下,设置centos系统默认的 ...

  6. Linux CentOS7.x安装docker全过程

    1.在安装docker之前,首先使用yum -y remove docker命令移除系统中已有的旧版本的docker yum -y remove docker 这里显示该系统没有安装过docker: ...

  7. postgres高可用学习篇一：如何通过patroni如何管理3个postgres节点

    环境: CentOS Linux release 7.6.1810 (Core) 内核版本:3.10.0-957.10.1.el7.x86_64 node1:192.168.216.130 node2 ...

  8. 解读 v8 排序源码

    前言 v8 是 Chrome 的 JavaScript 引擎,其中关于数组的排序完全采用了 JavaScript 实现. 排序采用的算法跟数组的长度有关,当数组长度小于等于 10 时,采用插入排序,大 ...

  9. js 对嵌套页面的父页面进行跳转

    window.top.location.href = '/stores';

  10. NOIP 2018 考前须知

    Day0Day0Day0来水一发 Created with Raphaël 2.2.0开始考试浏览题面(3遍),注意数据范围初步判定难度,先易后难15分钟左右想正解实在想吃不出写暴力,NOIP部分分很 ...