本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下
1. lib.js
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) {
//--<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>总大小
fileSize = file.getSize(FLIE.id);
//--以2M为单位进行<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>切割
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',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,'position:relative; top:50%; width:100%; height:30px;');
add.Attr(d1,'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,'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,'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,'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);
}
/**
- 模板字符串，语法标签采用
- 完全遵循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(/(. ?)<\/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]);
}
}
