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添加
希望本文所述对大家学习javascript程序设计有所帮助。
下一篇: php如何设置session超时过期时间