欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-24 12:09:35
...
本文实例介绍了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 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 

2. add.html


 

Lumino Pro - Dashboard   
  
Banner添加
js HTML5 Ajax实现文件上传进度条功能_javascript技巧

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