js HTML5 Ajax实现文件上传进度条功能

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下

1.  lib.js

var Host = window.location.host;
//--Cookie
function setCookie(name,value)
{
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + '='+ escape (value) + ';expires=' + exp.toGMTString();
}
function getCookie(name)
{
  var arr,reg=new RegExp('(^| )'+name+'=([^;]*)(;|$)');
  if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return null;
}
//--Dom & String
var get = {
   //-- 获得Dom Id
   Id:function(obj)
   {
     return is.object(obj) ? obj : (document.getElementById(obj));
   },
   //--获得Body
   body:function()
   {
     return document.body;
   },
   //-- 通过Html 标签取对象
   Tag:function(obj, Tagname)
   {
    return obj.getElementsByTagName(Tagname);
   },
   //-- 通过Name 来取对象
   Name:function (Name)
   {
     return document.getElementsByName(Name);
   },
   //-- Url编码转换
   encode:function (str)
   {
    return encodeURIComponent(str);
   },
   filepath:function (obj,callback)
   {
     window.URL = window.URL || window.webkitURL;
     img = new Image();
     var reader = new FileReader();
     reader.readAsDataURL(get.Id(obj).files[0]);
     reader.onload = function(e){
       callback(this.result);
       source = this.result;
     }
    // return window.URL.createObjectURL(get.Id(obj).files[0]);
   }
}
var set = {
  //-- url 跳转
  url:function(URL)
  {
    window.location.href = URL;
  },
  //-- 页面刷新
  reload:function()
  {
    window.location.reload();
  },
  //-- 动态设置 标签内容 @ obj 为标签内容,text 为内容
  html:function (obj, text)
  {
     obj.innerHTML = text;
  }
}
var string = {
  //-- 将字符转换成Json
  toJson:function(str)
  {
    return eval('('+str+')');
  },
  //-- 不区分大小写判断 相等true ,
  eqlower:function(str1, str2)
  {
    if(str1.toLowerCase() == str2.toLowerCase()){
      return true;
    }
    return false;
  }
}
var is = {
  //-- 是否是IE浏览器,用此来判断是否支持HTML5,低于IE10的返回false,由于 IE采用 V8 JavaScript引擎
  html5:function ()
  {
    return (!/*@cc_on!@*/~0x1111111111111111) ? false : true;
  },
  //--验证身份证,并且返回身份证,性别,住址,年龄
  Card:function (sId) {

    var card_area={

        11:'北京', 12:'天津', 13:'河北', 14:'山西', 21:'辽宁', 15:'内蒙古',

        22:'吉林', 31:'上海', 32:'江苏', 33:'浙江', 34:'安徽', 23:'黑龙江',

        35:'福建', 36:'江西', 37:'山东', 41:'河南', 42:'湖北', 43:'湖南',

        44:'广东', 45:'广西', 46:'海南', 50:'重庆', 51:'四川', 52:'贵州',

        53:'云南', 54:'西藏', 61:'陕西', 62:'甘肃', 63:'青海', 64:'宁夏',

        65:'新疆', 71:'台湾', 81:'香港', 82:'澳门', 91:'国外'

      };
      var iSum=0
      var info=''
      var card_info=Array(2);
      var error = '';
      sId=sId.replace(/x$/i,'a');       

      if (sId.length==0){
        error = '请填写你的身份证';
        return false;
      } 

      if (null == card_area[parseInt(sId.substr(0,2))]) {
        error = '非法证件你的地区填写有错误请仔细填写';
        return false;
      }

      sBirthday=sId.substr(6,4)+'-'+Number(sId.substr(10,2)) + '-'+Number(sId.substr(12,2));
      var d = new Date(sBirthday.replace(/-/g,'/'));

      if (sBirthday!=(d.getFullYear()+'-'+ (d.getMonth()+1) + '-' + d.getDate())) {
        error = '非法证件你的生日填写有错误请仔细填写';
        return false;
      }

      for(var i = 17; i>=0; i--)
      {
        iSum += (Math.pow(2,i) % 11) *
        parseInt(sId.charAt(17 - i),11)
      }      

      if (1 != iSum%11) {
        error = '非法证号你确认你是地球人请认真填写哦~~~~';
        return false;

      }

      if (sId.length>19){
        error = '你确认你的身份证是有效证件?';
        return false;
      }

      card_info[0] = card_area[parseInt(sId.substr(0, 2))];
      card_info[1] = sBirthday;
      card_info[2] = sId.substr(16, 1) % 2 ? '男' : '女';
      return card_info;

  },
  //--获取变量的类型, object,string,int.....等
  type:function(type)
  {
    if(is.object(type)) {
      return 'object';
    }else if (is.string(type)) {
      return 'string';
    }else if (is.int(type)) {
      return 'int';
    }else if (is.double(type)) {
      return 'double';
    }else {
      return 'null';
    }
  },
  //-- 变量是否是对象,返回 true|false
  object:function(type)
  {
    return 'object' == typeof(type) ? true:false;
  },
  //-- 变量是否是字符串 , 返回 true|false
  string:function(type)
  {
    return 'string' == typeof(type) ? true:false;
  },
  //-- 变量是否是整型,返回 true|false
  int:function(type)
  {
    if ('number' == typeof(type)) {
      if(0 > type.toString().indexOf('.')) {
        return true;
      }
    }
    return false;
  },
  //-- 变量是否是小数,返回 true|false
  double:function(type)
  {
    if('number' == typeof(type)) {
      if (0<=type.toString().indexOf('.')) {
        return true;
      }
    }
    return false;
  }
}
var file = {
  //--异步文件上传
  upload:function (json)
  {
    var post = new XMLHttpRequest();
    var FLIE = new Object();
    var json = is.object(json) ? json : string.toJson(json);
    var dataType = string.eqlower(json.dataType,'json') ? true : false;
    var fileSize = 0;
    if(!json.url&&json.error) {
      json.error(404);
      return;
    }
    if(!is.object(json.file)) {
      FLIE.id = get.Id(json.file);
      //-- 大文件处理
      if(json.maxfile) { 

        //--文件总大小
        fileSize = file.getSize(FLIE.id);
        //--以2M为单位进行文件切割
        shardSize = 1024 * 1024 << 1;
        //--总片数
        shardCount = Math.ceil(fileSize / shardSize);
        for(var i = 0; i < shardCount; ++i)
        {
          //--计算每一片的起始与结束位置
          var start = i * shardSize;
          var end = Math.min(fileSize, start + shardSize);
          var formData = new FormData();
          //--slice方法用于切出文件的一部分
          formData.append(json.file, FLIE.id.files[0].slice(start,end));
          formData.append("total", shardCount); //总片数
          formData.append("index", i + 1);    //当前是第几片
          post.upload.addEventListener('progress', callback, false);
          post.open('post', json.url, true); // 异步传输
          post.send(formData);
          post.upload.onprogress = function (ev) {
           if(file.getProgress(ev) == 100) {
              json.success(ev);
           }
          }
        }
      }else {
        var formData = new FormData();
        formData.append(json.file, FLIE.id.files[0]);
        if (json.progress) {
          post.upload.addEventListener('progress', json.progress, false);
        }
        post.open('post', json.url, true); // 异步传输
        post.send(formData);
        /*post.upload.onprogress = function (ev) {
         if(file.getProgress(ev) == 100) {
            json.success(ev);
         }
        }*/
        post.onreadystatechange = function () {
          switch (post.readyState) {
            case 1:{break;}
            case 2:{break;}
            case 3:{break;}
            case 4:{
              if (post.status == 200 || post.status == 0) {
               json.success(string.toJson(post.responseText));
              }
              break;
            }
          }
        }
      }
    }

  },
  //-- 获得上传文件的进度值
  getProgress:function (evt) {
    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
    return percentComplete.toString();
  },
  //-- 获得文件的大小
  getSize:function (file) {
    var FILE = get.Id(file).files[0];
    var fileSize = 0;

    if (file.size > 1024 * 1024) {
      fileSize = (Math.round(FILE.size * 100 / (1024 * 1024)) / 100).toString();
    } else {
      fileSize = (Math.round(FILE.size * 100 / 1024) / 100).toString();
    }
    return fileSize;
  },
  //-- 获得文件的类型
  getType:function (file) {
    var FILE = get.Id(file).files[0];
    return FILE.type;
  },
  //-- 获得文件的名字
  getName:function (file) {
    var FILE = get.Id(file).files[0];
    return FILE.name;
  },
  //--包含文件
  include:function (path) {

  }
}
//--Ajax数据提交类
var Call = {
    /**
     * 参数为json对象|Json字符串,
     * @type post|get 默认为get ,请求方式
     * @url String 字符串型 ,请求地址
     * @loading bool true|false 是否开启动画
     * @time int 动画时间 如果 loading 为false 则不用设置这个参数
     * @data Json | String 提交的数据
     * @sucess 回调函数 这个必须有
     */
    Ajax:function(json){
      var json = is.object(json)?json:string.toJson(json);
      var type = (json.type == undefined) || (json.type == '') ? 'get' : json.type; ;
      var url = (json.url == undefined) || (json.url == '') ? alert('请求url不能为空') : json.url;
      var loading = (json.Loading == undefined) || (json.Loading == '') ? false : json.Loading;
      var time = (json.time == undefined) || (json.time == '') ? 2000 : json.time;
      var dataType = string.eqlower(json.dataType,'json') ? 'json' : 'string';
      if(loading) { var L = Loading.start(); }
      var data = '';
      if(is.object(json.data)) {
        if(json.data) {
          for(d in json.data) {
           data = data + d + '=' + json.data[d] + '&';
          }
        }
        if(string.eqlower(json.type,'get')) {
          data ='?' + data.substring(0, data.length-1);
        }
      }else{
        if(json.data.length>=1) {
          data = json.data.indexOf('?') < 0 ? '?'+json.data:json.data+'';
        }
      }
      try {
        //--IE高版本创建XMLHTTP
        XMLHttpReq = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(E) {
        try {
          XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');//IE低版本创建XMLHTTP
        }
        catch(E) {
          XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器,直接创建XMLHTTP对象
        }
      }
      if(XMLHttpReq) {
        if (string.eqlower(json.type, 'post')) {
          XMLHttpReq.open('post', url, true);
          XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          XMLHttpReq.send(data);
        }else if (string.eqlower(json.type, 'get')) {
          XMLHttpReq.open('get', url+data, true);
          XMLHttpReq.send(null);
        }
        XMLHttpReq.onreadystatechange = function () { 

          switch (XMLHttpReq.readyState) {
            case 1:{break;}
            case 2:{break;}
            case 3:{break;}
            case 4:{
              if (XMLHttpReq.status == 200 || XMLHttpReq.status == 0) {
                if (loading) {
                  setTimeout(function(){
                    Loading.stop(L);
                    if(json.dataType == 'json')
                     json.success(string.toJson(XMLHttpReq.responseText));
                    else
                     json.success(XMLHttpReq.responseText)
                  }, time*1000);
                }else {

                    if(json.dataType == 'json')
                     json.success(string.toJson(XMLHttpReq.responseText));
                    else
                     json.success(XMLHttpReq.responseText)
                }
              }
              break;
            }
          }
        }
      }
    }
}
var Loading = {
  //-- Ajax动画
  start:function(){
    var d = add.Dom(document.body,'style');
    d.innerHTML = '@keyframes d{from {left:0px;}to {left:98%;}}';
    var back = add.Dom(document.body, 'div');
    var d0 = add.Dom(back, 'div');
    var d1 = add.Dom(d0, 'div');
    var d2 = add.Dom(d0, 'div');
    var d3 = add.Dom(d0, 'div');
    var d4 = add.Dom(d0, 'div');
    add.Attr(back, 'style', 'width:100%;height:100%;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background:#000; position:fixed; left:0px; top:0px; z-index;1000;');
    add.Attr(d0, 'style', 'position:relative; top:50%; width:100%; height:30px;');
    add.Attr(d1, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 2s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
    add.Attr(d2, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 3s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
    add.Attr(d3, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 4s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
    add.Attr(d4, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 5s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
    var div = { domback:back, dom0:d0, dom1:d1, dom2:d2, dom3:d3, dom4:d4 }
    return div;
  },
  //-- Ajax停止动画
  stop:function(d) {
    d.dom0.parentNode.removeChild(d.dom0);
    d.dom1.parentNode.removeChild(d.dom1);
    d.dom2.parentNode.removeChild(d.dom2);
    d.dom3.parentNode.removeChild(d.dom3);
    d.dom4.parentNode.removeChild(d.dom4);
    d.domback.parentNode.removeChild(d.domback);
  }

}
var del = {
  Dom:function(obj) {
    obj.parentNode.removeChild(obj);
  }
}
var add = {
  //--动态添加Dom节点
  Dom:function (obj,dom) {
    var dom = document.createElement(dom);
    get.Id(obj).appendChild(dom);
    return dom;
  },
  //-- 动态添加属性
  Attr:function(obj,key,value){
    obj.setAttribute(key, value);
    return obj;
  }
}
//--URL编码
function url(Str){
  return decodeURI(Str);
}
/**
 * 模板字符串,语法标签采用<js></js>
 * 完全遵循javascript原生语法
 * @param template
 * @param vars
 * @returns {Function}
 */
function js_template(template, vars) {

  //唯一分隔标志字符串
  var split = '_{' + Math.random() + '}_';

  //消除换行符
  var estr = template.replace(/\n|\r|\t/g, '');

  var js = [];
  /****
   * 匹配标签<js> ...</js>--并且替换为特定的分隔串,
   * 并将匹配的js代码放入js数组中备用
   * */
  estr = estr.replace(/<js>(.*?)<\/js>/g, function ($0, $1) {
    js.push($1);
    return split;
  });

  /*根据特定的分隔串分隔得到普通text文本串的数组*/
  var text = estr.split(split);
  estr = " var output='';";
  /****
   * 0101010---0为text[]元素,1为js[]元素
   * 重新串起来连接为可执行eval的estr
   * **/
  for (var i = 0; i < js.length; ++i) {
    estr += 'output+=text[' + i + '];';
    estr += js[i];

  }
  estr += 'output+=text[' + js.length + '];';

  estr += 'return output;';

  var fun =new Function('vars','text',estr);
  return function(data){
    return fun.apply(null,[data,text]);
  }
}

2.  add.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Lumino Pro - Dashboard</title>
<link href="__SOURCE__/css/bootstrap.min.css" rel="stylesheet">
<link href="__SOURCE__/css/datepicker3.css" rel="stylesheet">
<link href="__SOURCE__/css/styles.css" rel="stylesheet">
<link href="__SOURCE__/css/Table.css" rel="stylesheet">
<link href="__SOURCE__/css/dt.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/buttons.css" rel="stylesheet">
<link href="__SOURCE__/css/file.css" rel="stylesheet">
<link href="__SOURCE__/css/webuploader.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/bootstrap-switch.min.css" rel="stylesheet">
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<link href="__SOURCE__/css/rgba-fallback.css" rel="stylesheet">
<script src="__SOURCE__/js/html5shiv.js"></script>
<script src="__SOURCE__/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
  <include file="Apps/Admin/View/include/nav.html"/>
  <div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
    <form role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
  <include file="Apps/Admin/View/include/menu.html"/>
  </div><!--/.sidebar-->
  <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
      <ol class="breadcrumb">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li class="active">Dashboard</li>
      </ol>
    </div>
    <div class="row col-no-gutter-container">
    <div class="panel panel-default">
        <div class="panel-heading">Banner添加
          <button id='up' type="button" style='float:right; margin:4px;"' class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>上传</button>
          <button id='add' type="button" style='float:right; margin:4px;"' class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>确定添加</button>
        </div>
          <div class="panel-body">
            <div class="canvas-wrapper">
              <form id='banner'>
               <dl class='dt'>
                <dd><label>Banner名字</label></dd>
                <dt>
                  <div class="form-group has-success">
                    <input name='name' class="form-control" placeholder="Banner名字" value=''>
                  </div>
                </dt>
                <div style='clear:both;'></div>
                <dd><label>Banner类型:</label></dd>
                <dt>
                  <div class="form-group has-warning">
                    <select name='type' class="form-control" style='background:rgb(31,45,55); color:#FFF;'>
                      <option value='1' style=' font-size:18px;'>首页</option>
                      <option value='2' style=' font-size:18px;'>内页广告</option>
                    </select>
                  </div>
                </dt>
                <div style='clear:both;'></div>
                <dd><label>Banner链接地址:</label></dd>
                <dt>
                  <div class="form-group has-warning">
                    <input name='link' class="form-control" placeholder="Banner链接地址" value=''>
                  </div>
                </dt>
               </dl>
               <dl class='dt'>
                <dd><label>Banner上传:</label></dd>
                <dt>
                  <div class="form-group has-warning">
                    <input class="form-control" type = 'button' value='选择文件'>
                    <input id='files' type='file' class="file">
                  </div>
                </dt>
                <div style='clear:both;'></div>
                <dd><label>文件类型:</label></dd>
                <dt>
                  <div class="form-group has-warning">
                    <div id='filetype' class='left' style='padding-top:2px;'></div>
                  </div>
                </dt>
                <div style='clear:both;'></div>
                <dd><label>文件上传进度:</label></dd>
                <dt>
                  <div class='form-control' style='padding:2px; height:26px; overflow:hidden;'>
                    <!-- <div id='progress' style='background:#ABCDEF; width:0px; height:22px;'></div> -->
                    <progress id='progress' max="100" value='0' style='width:100%; height:22px; background:#30a5ff;'>o(︶︿︶)o</progress>
                    <div id='gress' height:0px; style='padding-top:2px; color:#FFF; position:relative; bottom:28px; left:40%;'></div>
                  </div>
                  <div id='fileSize' class='right' style='padding-top:2px;'>
                    <span class='left'></span>
                    <span></span>
                  </div>
                </dt>
                </dl>
              </form>
              <div style='clear:both;'></div>
              <div class='fixed-table-container' style='height:244px;'>
                <img class='left' id ='thmb' src=''>
                <div>
                  <ul class='ul-info' style='display:none;'>
                    <li><span class='left'>文件大小:</span><p>22222kb</p></li>
                    <li><span class='left'>文件路径:</span><p>22222kb</p></li>
                    <li><span class='left'>图片高度:</span><p>22222kb</p></li>
                    <li><span class='left'>图片宽度:</span><p>22222kb</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

    </div>  <!--/.main-->
  </div>

  <script src="__SOURCE__/js/jquery-1.11.1.min.js"></script>
  <script src="__SOURCE__/js/bootstrap.min.js"></script>
  <script src="__SOURCE__/js/file.js"></script>
  <script type="text/javascript" src="__SOURCE__/js/plus/bootstrap-datetimepicker.de.js" charset="UTF-8"></script>
  <script src="__SOURCE__/js/plus/bootstrap-switch.min.js"></script>
  <script src="__SOURCE__/js/table.js"></script>
  <script type="text/javascript" src='__SOURCE__/js/lib.js'></script>
  <script>
    var data = new Object();
    get.Id('files').onchange = function () {
      get.filepath(this,function(str){
        get.Id('thmb').src = str;
      });
      set.html(filetype,file.getName('files'));
      get.Id('progress').value = 0;
      set.html(get.Id('gress'),'');
      set.html(get.Tag(get.Id('fileSize'), 'span')[0], file.getSize('files') + 'KB');
      set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/0kb');
    }
    get.Id('up').onclick = function () {
      if(file.getSize('files')<=0) {
        return false;
      }
      file.upload({
        form:'banner', //form的id
        url:'{:U('Banner/add',0,0)}', //上传请求文件的地址
        //maxfile:true, //是否启用大文件上传
        dataType:'json',
        progress:function(ev) { //--上传中的进度回掉函数
          get.Id('progress').value = file.getProgress(ev);
          //获得上传进度用file.getProgress(ev)
          set.html(get.Id('gress'),file.getProgress(ev)+'%');

          set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/' + file.getProgress(ev) * (file.getSize('files') / 100 >>0) + 'KB');
        },
        file:'files', //--文件输入框的id
        //--上传完成后,后台返回的回调函数
        success:function(e){
          set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/' + file.getSize('files') + 'KB');
          set.html(get.Id('gress'),'上传完成');
          data.bannerWidth = e.bannerWidth;
          data.bannerHeight = e.bannerHeight;
          data.bannerTyle = e.bannerTyle;
          data.bannerImg = e.bannerImg;
        }
      });
    }
    get.Id('add').onclick = function () {
      data.name = get.Name('name')[0].value;
      data.type = get.Name('type')[0].value;
      data.link = get.Name('link')[0].value;
      data.act = 'add';
      Call.Ajax({
        type:'post',  // 请求方式
        Loading:true, // 是否启动动画
        time:5,  //动画显示几秒
        url:'{:U('Banner/add',0,0)}?act=add', //请求地址
        data:data,  //发送的数据
        dataType:'json', //Ajax返回的数据类型 ,可以是String
        success:function (e) { //回调函数
          set.url(e.url);
        }
      });
    }
  </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

时间: 2016-02-12

JavaScript实现网页加载进度条代码超简单

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

js ajax加载时的进度条代码

最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件.切记不要忘记引入jquery.js css文件 #_loadMsg{ display: inline-block; width: 100%;

JS与HTML结合实现流程进度展示条思路详解

效果如下: 一.设计思路 分为以下几步(仅供参考) [竖线线] 这个采用ul的list标签制作,保证了可随时添加,以及纵向排布 [小圆圈] html标签好像没有提供小圆圈标签,此处采用,div添加弧度角完成,,正方形的div添加弧度等于div的长(或者宽),就能够实现小圆圈.带子就更简单了,,div里直接添加文字即可 [文字] 文字要求紧跟小圆圈,,且与小圆圈保持同一水平高度,此处采用,position: absolute;设置top完成同一水平高度的布局 [动态效果] 前端的动态效果,不用说肯

直接拿来用的页面跳转进度条JS实现

本文实例介绍了基于javascript实现的页面跳转进度条,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <HTML> <HEAD> <TITLE>open代码</TITLE> <SCRIPT type=text/javascript> <!-- var ie5 = (document.all && document.getElementsByTagName); var step = 0; function se

原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

JavaScript实现水平进度条拖拽效果

本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

jquery插件NProgress.js制作网页加载进度条

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

pace.js和NProgress.js两个加载进度插件的一点小总结

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NProgress.js NProgress是基于jquery的,且版本要 >1.8 API: NProgress.start() - 启动进度条 NProgress.set(0.4) - 将进度设置到具体的百分比位置 NProgress.inc() - 少量增加进度 NProgress.done()

jquery 实现拖动文件上传加载进度条功能

通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" > <div class="progress-label">0%</div> <div class="son"></div> </div> //要拖动到的地方 <div class="main

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

jquery网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

教您去掉ie网页加载进度条的方法

这样虽没有对功能有什么影响,可是体验总不怎么好,那如何解决这个问题了,网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的,可是我发现这个方法这样的情形下并不怎么好使. 复制代码 代码如下: <div> <ul> <li><a href="1.html" target="page"></a></li> <li><a hre

用jQuery模拟页面加载进度条的实现代码

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

基于jQuery实现模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio