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程序设计有所帮助。