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程序设计有所帮助。