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

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,'//m.sbmmt.com/m/'));
 
      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 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('?')  
 * 完全遵循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数组中备用
   * */
  estr = estr.replace(/(.*?)/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 

 



    

      

        
    
  
   
  
     
    

      

        
Dashboard
      
    

    

        
Banner添加 
          上传
          确定添加
        
          

            

              

               
Banner名字
                

                  

                    
                
                

                
Banner类型:
                

                  

                    首页内页广告
                
                

                
Banner链接地址:
                

                  

                    
                
               
Banner上传:
                

                  

                    
                
                

                
文件类型:
                

                  

                    

                  
                
                

                
文件上传进度:
                

                  

                    
                    o(︶︿︶)o

                  
                  

                    
                    
                  
                
                
              

              

                

                  
文件大小:
22222kb
                    
文件路径:
22222kb
                    
图片高度:
22222kb
                    
图片宽度:
22222kb