首页 / 脚本样式 / JavaScript / js HTML5 Ajax实现文件上传进度条功能

var Host = window.location.host;//--Cookiefunction 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]）;elsereturn null;}//--Dom & Stringvar 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 = {//-- 将字符转换成JsontoJson: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=0var 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|falseobject:function（type） {return "object" == typeof（type） ? true:false;},//-- 变量是否是字符串 ， 返回 true|falsestring:function（type） {return "string" == typeof（type） ? true:false;},//-- 变量是否是整型，返回 true|falseint:function（type） {if （"number" == typeof（type）） {if（0 > type.toString（）.indexOf（"."）） {return true;}}return false;},//-- 变量是否是小数，返回 true|falsedouble: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） {//--文件总大小fileSize = file.getSize（FLIE.id）;//--以2M为单位进行文件切割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", 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） {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高版本创建XMLHTTPXMLHttpReq = 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, "style", "position:relative; top:50%; width:100%; height:30px;"）;add.Attr（d1, "style", "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, "style", "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, "style", "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, "style", "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）;}/** * 模板字符串，语法标签采用<js></js>* 完全遵循javascript原生语法 * @param template * @param vars * @returns {Function} */function js_template（template, vars） { //唯一分隔标志字符串var split = "_{" + Math.random（） + "}_"; //消除换行符var estr = template.replace（/
|
|	/g, ""）; var js = [];/**** * 匹配标签<js> ...</js>--并且替换为特定的分隔串， * 并将匹配的js代码放入js数组中备用 * */estr = estr.replace（/<js>（.*?）</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]）;}}

<！DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Lumino Pro - Dashboard</title><link href="__SOURCE__/css/bootstrap.min.css" rel="stylesheet"><link href="__SOURCE__/css/datepicker3.css" rel="stylesheet"><link href="__SOURCE__/css/styles.css" rel="stylesheet"><link href="__SOURCE__/css/Table.css" rel="stylesheet"><link href="__SOURCE__/css/dt.css" rel="stylesheet"><link href="__SOURCE__/css/plus/buttons.css" rel="stylesheet"><link href="__SOURCE__/css/file.css" rel="stylesheet"><link href="__SOURCE__/css/webuploader.css" rel="stylesheet"><link href="__SOURCE__/css/plus/bootstrap-switch.min.css" rel="stylesheet"><link href="http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css"><！--[if lt IE 9]><link href="__SOURCE__/css/rgba-fallback.css" rel="stylesheet"><script src="__SOURCE__/js/html5shiv.js"></script><script src="__SOURCE__/js/respond.min.js"></script><！[endif]--></head><body><include file="Apps/Admin/View/include/nav.html"/><div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar"><form role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div></form><include file="Apps/Admin/View/include/menu.html"/></div><！--/.sidebar--> <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main"> <div class="row"><ol class="breadcrumb"><li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li><li class="active">Dashboard</li></ol></div><div class="row col-no-gutter-container"><div class="panel panel-default"><div class="panel-heading">Banner添加 <button id="up" type="button" style="float:right; margin:4px;"" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>上传</button><button id="add" type="button" style="float:right; margin:4px;"" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>确定添加</button></div><div class="panel-body"><div class="canvas-wrapper"><form id="banner"> <dl class="dt"><dd><label>Banner名字</label></dd><dt><div class="form-group has-success"><input name="name" class="form-control" placeholder="Banner名字" value=""></div></dt><div style="clear:both;"></div><dd><label>Banner类型:</label></dd><dt><div class="form-group has-warning"><select name="type" class="form-control" style="background:rgb（31,45,55）; color:#FFF;"><option value="1" style=" font-size:18px;">首页</option><option value="2" style=" font-size:18px;">内页广告</option></select></div></dt><div style="clear:both;"></div><dd><label>Banner链接地址:</label></dd><dt><div class="form-group has-warning"><input name="link" class="form-control" placeholder="Banner链接地址" value=""></div></dt> </dl> <dl class="dt"><dd><label>Banner上传:</label></dd><dt><div class="form-group has-warning"><input class="form-control" type = "button" value="选择文件"><input id="files" type="file" class="file"></div></dt><div style="clear:both;"></div><dd><label>文件类型:</label></dd><dt><div class="form-group has-warning"><div id="filetype" class="left" style="padding-top:2px;"></div></div></dt><div style="clear:both;"></div><dd><label>文件上传进度:</label></dd><dt><div class="form-control" style="padding:2px; height:26px; overflow:hidden;"><！-- <div id="progress" style="background:#ABCDEF; width:0px; height:22px;"></div> --><progress id="progress" max="100" value="0" style="width:100%; height:22px; background:#30a5ff;">o（︶︿︶）o</progress><div id="gress" height:0px; style="padding-top:2px; color:#FFF; position:relative; bottom:28px; left:40%;"></div></div><div id="fileSize" class="right" style="padding-top:2px;"><span class="left"></span><span></span></div></dt></dl></form><div style="clear:both;"></div><div class="fixed-table-container" style="height:244px;"><img class="left" id ="thmb" src=""><div><ul class="ul-info" style="display:none;"><li><span class="left">文件大小:</span><p>22222kb</p></li><li><span class="left">文件路径:</span><p>22222kb</p></li><li><span class="left">图片高度:</span><p>22222kb</p></li><li><span class="left">图片宽度:</span><p>22222kb</p></li></ul></div></div></div></div></div> </div><！--/.main--></div> <script src="__SOURCE__/js/jquery-1.11.1.min.js"></script><script src="__SOURCE__/js/bootstrap.min.js"></script><script src="__SOURCE__/js/file.js"></script><script type="text/javascript" src="__SOURCE__/js/plus/bootstrap-datetimepicker.de.js" charset="UTF-8"></script><script src="__SOURCE__/js/plus/bootstrap-switch.min.js"></script><script src="__SOURCE__/js/table.js"></script><script type="text/javascript" src="__SOURCE__/js/lib.js"></script><script>var data = new Object（）;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） {return false;}file.upload（{form:"banner", //form的idurl:"{: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返回的数据类型 ，可以是Stringsuccess:function （e） { //回调函数set.url（e.url）;}}）;}</script></body></html>