js HTML5 Ajax实现文件上传进度条功能
本文实例介绍了js结合HTML5Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下
1. lib.js
varHost=window.location.host;
//--Cookie
functionsetCookie(name,value)
{
varDays=30;
varexp=newDate();
exp.setTime(exp.getTime()+Days*24*60*60*1000);
document.cookie=name+'='+escape(value)+';expires='+exp.toGMTString();
}
functiongetCookie(name)
{
vararr,reg=newRegExp('(^|)'+name+'=([^;]*)(;|$)');
if(arr=document.cookie.match(reg))
returnunescape(arr[2]);
else
returnnull;
}
//--Dom&String
varget={
//--获得DomId
Id:function(obj)
{
returnis.object(obj)?obj:(document.getElementById(obj));
},
//--获得Body
body:function()
{
returndocument.body;
},
//--通过Html标签取对象
Tag:function(obj,Tagname)
{
returnobj.getElementsByTagName(Tagname);
},
//--通过Name来取对象
Name:function(Name)
{
returndocument.getElementsByName(Name);
},
//--Url编码转换
encode:function(str)
{
returnencodeURIComponent(str);
},
filepath:function(obj,callback)
{
window.URL=window.URL||window.webkitURL;
img=newImage();
varreader=newFileReader();
reader.readAsDataURL(get.Id(obj).files[0]);
reader.onload=function(e){
callback(this.result);
source=this.result;
}
//returnwindow.URL.createObjectURL(get.Id(obj).files[0]);
}
}
varset={
//--url跳转
url:function(URL)
{
window.location.href=URL;
},
//--页面刷新
reload:function()
{
window.location.reload();
},
//--动态设置标签内容@obj为标签内容，text为内容
html:function(obj,text)
{
obj.innerHTML=text;
}
}
varstring={
//--将字符转换成Json
toJson:function(str)
{
returneval('('+str+')');
},
//--不区分大小写判断相等true,
eqlower:function(str1,str2)
{
if(str1.toLowerCase()==str2.toLowerCase()){
returntrue;
}
returnfalse;
}
}
varis={
//--是否是IE浏览器,用此来判断是否支持HTML5，低于IE10的返回false，由于IE采用V8JavaScript引擎
html5:function()
{
return(!/*@cc_on!@*/~0x1111111111111111)?false:true;
},
//--验证身份证，并且返回身份证，性别，住址，年龄
Card:function(sId){
varcard_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:'国外'
};
variSum=0
varinfo=''
varcard_info=Array(2);
varerror='';
sId=sId.replace(/x$/i,'a');
if(sId.length==0){
error='请填写你的身份证';
returnfalse;
}
if(null==card_area[parseInt(sId.substr(0,2))]){
error='非法证件你的地区填写有错误请仔细填写';
returnfalse;
}
sBirthday=sId.substr(6,4)+'-'+Number(sId.substr(10,2))+'-'+Number(sId.substr(12,2));
vard=newDate(sBirthday.replace(/-/g,'/'));
if(sBirthday!=(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate())){
error='非法证件你的生日填写有错误请仔细填写';
returnfalse;
}
for(vari=17;i>=0;i--)
{
iSum+=(Math.pow(2,i)%11)*
parseInt(sId.charAt(17-i),11)
}
if(1!=iSum%11){
error='非法证号你确认你是地球人请认真填写哦~~~~';
returnfalse;
}
if(sId.length>19){
error='你确认你的身份证是有效证件？';
returnfalse;
}
card_info[0]=card_area[parseInt(sId.substr(0,2))];
card_info[1]=sBirthday;
card_info[2]=sId.substr(16,1)%2?'男':'女';
returncard_info;
},
//--获取变量的类型，object，string，int.....等
type:function(type)
{
if(is.object(type)){
return'object';
}elseif(is.string(type)){
return'string';
}elseif(is.int(type)){
return'int';
}elseif(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('.')){
returntrue;
}
}
returnfalse;
},
//--变量是否是小数，返回true|false
double:function(type)
{
if('number'==typeof(type)){
if(0<=type.toString().indexOf('.')){
returntrue;
}
}
returnfalse;
}
}
varfile={
//--异步文件上传
upload:function(json)
{
varpost=newXMLHttpRequest();
varFLIE=newObject();
varjson=is.object(json)?json:string.toJson(json);
vardataType=string.eqlower(json.dataType,'json')?true:false;
varfileSize=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(vari=0;i<shardCount;++i)
{
//--计算每一片的起始与结束位置
varstart=i*shardSize;
varend=Math.min(fileSize,start+shardSize);
varformData=newFormData();
//--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{
varformData=newFormData();
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){
case1:{break;}
case2:{break;}
case3:{break;}
case4:{
if(post.status==200||post.status==0){
json.success(string.toJson(post.responseText));
}
break;
}
}
}
}
}
},
//--获得上传文件的进度值
getProgress:function(evt){
varpercentComplete=Math.round(evt.loaded*100/evt.total);
returnpercentComplete.toString();
},
//--获得文件的大小
getSize:function(file){
varFILE=get.Id(file).files[0];
varfileSize=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();
}
returnfileSize;
},
//--获得文件的类型
getType:function(file){
varFILE=get.Id(file).files[0];
returnFILE.type;
},
//--获得文件的名字
getName:function(file){
varFILE=get.Id(file).files[0];
returnFILE.name;
},
//--包含文件
include:function(path){
}
}
//--Ajax数据提交类
varCall={
/**
*参数为json对象|Json字符串，
*@typepost|get默认为get，请求方式
*@urlString字符串型,请求地址
*@loadingbooltrue|false是否开启动画
*@timeint动画时间如果loading为false则不用设置这个参数
*@dataJson|String提交的数据
*@sucess回调函数这个必须有
*/
Ajax:function(json){
varjson=is.object(json)?json:string.toJson(json);
vartype=(json.type==undefined)||(json.type=='')?'get':json.type;;
varurl=(json.url==undefined)||(json.url=='')?alert('请求url不能为空'):json.url;
varloading=(json.Loading==undefined)||(json.Loading=='')?false:json.Loading;
vartime=(json.time==undefined)||(json.time=='')?2000:json.time;
vardataType=string.eqlower(json.dataType,'json')?'json':'string';
if(loading){varL=Loading.start();}
vardata='';
if(is.object(json.data)){
if(json.data){
for(dinjson.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=newActiveXObject('Msxml2.XMLHTTP');
}
catch(E){
try{
XMLHttpReq=newActiveXObject('Microsoft.XMLHTTP');//IE低版本创建XMLHTTP
}
catch(E){
XMLHttpReq=newXMLHttpRequest();//兼容非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);
}elseif(string.eqlower(json.type,'get')){
XMLHttpReq.open('get',url+data,true);
XMLHttpReq.send(null);
}
XMLHttpReq.onreadystatechange=function(){
switch(XMLHttpReq.readyState){
case1:{break;}
case2:{break;}
case3:{break;}
case4:{
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;
}
}
}
}
}
}
varLoading={
//--Ajax动画
start:function(){
vard=add.Dom(document.body,'style');
d.innerHTML='@keyframesd{from{left:0px;}to{left:98%;}}';
varback=add.Dom(document.body,'div');
vard0=add.Dom(back,'div');
vard1=add.Dom(d0,'div');
vard2=add.Dom(d0,'div');
vard3=add.Dom(d0,'div');
vard4=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:d2sinfinite;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px15px15px15px;');
add.Attr(d2,'style','height:15px;width:15px;position:absolute;background:#ABCDEF;animation:d3sinfinite;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px15px15px15px;');
add.Attr(d3,'style','height:15px;width:15px;position:absolute;background:#ABCDEF;animation:d4sinfinite;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px15px15px15px;');
add.Attr(d4,'style','height:15px;width:15px;position:absolute;background:#ABCDEF;animation:d5sinfinite;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px15px15px15px;');
vardiv={domback:back,dom0:d0,dom1:d1,dom2:d2,dom3:d3,dom4:d4}
returndiv;
},
//--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);
}
}
vardel={
Dom:function(obj){
obj.parentNode.removeChild(obj);
}
}
varadd={
//--动态添加Dom节点
Dom:function(obj,dom){
vardom=document.createElement(dom);
get.Id(obj).appendChild(dom);
returndom;
},
//--动态添加属性
Attr:function(obj,key,value){
obj.setAttribute(key,value);
returnobj;
}
}
//--URL编码
functionurl(Str){
returndecodeURI(Str);
}
/**
*模板字符串，语法标签采用<js></js>
*完全遵循javascript原生语法
*@paramtemplate
*@paramvars
*@returns{Function}
*/
functionjs_template(template,vars){
//唯一分隔标志字符串
varsplit='_{'+Math.random()+'}_';
//消除换行符
varestr=template.replace(/\n|\r|\t/g,'');
varjs=[];
/****
*匹配标签<js>...</js>--并且替换为特定的分隔串，
*并将匹配的js代码放入js数组中备用
**/
estr=estr.replace(/<js>(.*?)<\/js>/g,function($0,$1){
js.push($1);
returnsplit;
});
/*根据特定的分隔串分隔得到普通text文本串的数组*/
vartext=estr.split(split);
estr="varoutput='';";
/****
*0101010---0为text[]元素,1为js[]元素
*重新串起来连接为可执行eval的estr
***/
for(vari=0;i<js.length;++i){
estr+='output+=text['+i+'];';
estr+=js[i];
}
estr+='output+=text['+js.length+'];';
estr+='returnoutput;';
varfun=newFunction('vars','text',estr);
returnfunction(data){
returnfun.apply(null,[data,text]);
}
}
2. add.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1"><title>LuminoPro-Dashboard</title>
<linkhref="__SOURCE__/css/bootstrap.min.css"rel="stylesheet">
<linkhref="__SOURCE__/css/datepicker3.css"rel="stylesheet">
<linkhref="__SOURCE__/css/styles.css"rel="stylesheet">
<linkhref="__SOURCE__/css/Table.css"rel="stylesheet">
<linkhref="__SOURCE__/css/dt.css"rel="stylesheet">
<linkhref="__SOURCE__/css/plus/buttons.css"rel="stylesheet">
<linkhref="__SOURCE__/css/file.css"rel="stylesheet">
<linkhref="__SOURCE__/css/webuploader.css"rel="stylesheet">
<linkhref="__SOURCE__/css/plus/bootstrap-switch.min.css"rel="stylesheet">
<linkhref='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'rel='stylesheet'type='text/css'>
<!--[ifltIE9]>
<linkhref="__SOURCE__/css/rgba-fallback.css"rel="stylesheet">
<scriptsrc="__SOURCE__/js/html5shiv.js"></script>
<scriptsrc="__SOURCE__/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<includefile="Apps/Admin/View/include/nav.html"/>
<divid="sidebar-collapse"class="col-sm-3col-lg-2sidebar">
<formrole="search">
<divclass="form-group">
<inputtype="text"class="form-control"placeholder="Search">
</div>
</form>
<includefile="Apps/Admin/View/include/menu.html"/>
</div><!--/.sidebar-->
<divclass="col-sm-9col-sm-offset-3col-lg-10col-lg-offset-2main">
<divclass="row">
<olclass="breadcrumb">
<li><ahref="#"><spanclass="glyphiconglyphicon-home"></span></a></li>
<liclass="active">Dashboard</li>
</ol>
</div>
<divclass="rowcol-no-gutter-container">
<divclass="panelpanel-default">
<divclass="panel-heading">Banner添加
<buttonid='up'type="button"style='float:right;margin:4px;"'class="btnbtn-default"><spanclass="glyphiconglyphicon-plus"></span>上传</button>
<buttonid='add'type="button"style='float:right;margin:4px;"'class="btnbtn-default"><spanclass="glyphiconglyphicon-plus"></span>确定添加</button>
</div>
<divclass="panel-body">
<divclass="canvas-wrapper">
<formid='banner'>
<dlclass='dt'>
<dd><label>Banner名字</label></dd>
<dt>
<divclass="form-grouphas-success">
<inputname='name'class="form-control"placeholder="Banner名字"value=''>
</div>
</dt>
<divstyle='clear:both;'></div>
<dd><label>Banner类型:</label></dd>
<dt>
<divclass="form-grouphas-warning">
<selectname='type'class="form-control"style='background:rgb(31,45,55);color:#FFF;'>
<optionvalue='1'style='font-size:18px;'>首页</option>
<optionvalue='2'style='font-size:18px;'>内页广告</option>
</select>
</div>
</dt>
<divstyle='clear:both;'></div>
<dd><label>Banner链接地址:</label></dd>
<dt>
<divclass="form-grouphas-warning">
<inputname='link'class="form-control"placeholder="Banner链接地址"value=''>
</div>
</dt>
</dl>
<dlclass='dt'>
<dd><label>Banner上传:</label></dd>
<dt>
<divclass="form-grouphas-warning">
<inputclass="form-control"type='button'value='选择文件'>
<inputid='files'type='file'class="file">
</div>
</dt>
<divstyle='clear:both;'></div>
<dd><label>文件类型:</label></dd>
<dt>
<divclass="form-grouphas-warning">
<divid='filetype'class='left'style='padding-top:2px;'></div>
</div>
</dt>
<divstyle='clear:both;'></div>
<dd><label>文件上传进度:</label></dd>
<dt>
<divclass='form-control'style='padding:2px;height:26px;overflow:hidden;'>
<!--<divid='progress'style='background:#ABCDEF;width:0px;height:22px;'></div>-->
<progressid='progress'max="100"value='0'style='width:100%;height:22px;background:#30a5ff;'>o(︶︿︶)o</progress>
<divid='gress'height:0px;style='padding-top:2px;color:#FFF;position:relative;bottom:28px;left:40%;'></div>
</div>
<divid='fileSize'class='right'style='padding-top:2px;'>
<spanclass='left'></span>
<span></span>
</div>
</dt>
</dl>
</form>
<divstyle='clear:both;'></div>
<divclass='fixed-table-container'style='height:244px;'>
<imgclass='left'id='thmb'src=''>
<div>
<ulclass='ul-info'style='display:none;'>
<li><spanclass='left'>文件大小:</span><p>22222kb</p></li>
<li><spanclass='left'>文件路径:</span><p>22222kb</p></li>
<li><spanclass='left'>图片高度:</span><p>22222kb</p></li>
<li><spanclass='left'>图片宽度:</span><p>22222kb</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!--/.main-->
</div>
<scriptsrc="__SOURCE__/js/jquery-1.11.1.min.js"></script>
<scriptsrc="__SOURCE__/js/bootstrap.min.js"></script>
<scriptsrc="__SOURCE__/js/file.js"></script>
<scripttype="text/javascript"src="__SOURCE__/js/plus/bootstrap-datetimepicker.de.js"charset="UTF-8"></script>
<scriptsrc="__SOURCE__/js/plus/bootstrap-switch.min.js"></script>
<scriptsrc="__SOURCE__/js/table.js"></script>
<scripttype="text/javascript"src='__SOURCE__/js/lib.js'></script>
<script>
vardata=newObject();
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){
returnfalse;
}
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程序设计有所帮助。