<!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. Java多线程 常见问题整理

    线程 什么是线程 线程是指程序在执行过程中,能够执行程序代码的一个执行单元. 线程和进程的区别 线程:一段程序执行过程中的一个执行单元,各个线程之间共享程序的内存空间以及一些进程级的资源,各线程拥有自 ...

  2. 身份证验证PHP类

    PHP根据身份证号,自动获取对应的星座函数,然后自动返回对应的星座,自动返回性别,判断是否成年 <?php class IdcardAction extends Action{ // PHP根据 ...

  3. spark 程序 windows 运行报错

    1 java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries. at ...

  4. 利用avicap32.dll实现的实时视频传输

    直接上代码吧! 在窗体上调用的类: using System; using System.Collections.Generic; using System.ComponentModel; using ...

  5. 项目Alpha冲刺——集合

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...

  6. Oracle两表关联，只取B表的第一条记录

    背景:  A表.B表两表关联,关联出来的结果里B表有不止一条,需求是只要B表结果中的某一条(按某字段排序) 首先想到了直接写个带排序的子查询去匹配外围的值,从这个结果集中只要第一条,但是经过验证发现, ...

  7. kubectl kubernetes cheatsheet

    from : https://cheatsheet.dennyzhang.com/cheatsheet-kubernetes-a4 PDF Link: cheatsheet-kubernetes-A4 ...

  8. python - 对接微信支付（PC）和 注意点

    注:本文仅提供 pc 端微信扫码支付(模式一)的示例代码. 关于对接过程中遇到的问题总结在本文最下方. 参考: 官方文档,    https://blog.csdn.net/lm_is_dc/arti ...

  9. 二、python介绍

    python第一篇-------python介绍 一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语 ...

  10. 时间戳显示为多少分钟前，多少天前的JS处理，JS时间格式化，时间戳的转换

    var dateDiff = function (timestamp) { // 补全为13位 var arrTimestamp = (timestamp + '').split(''); for ( ...