js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能

2020-03-24 16:02:10

字體：大中小

供稿：網(wǎng)友

本文實(shí)例介紹了js結(jié)合HTML5 html' target='_blank'>Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能，分享給大家供大家參考，具體內(nèi)容如下1. lib.js
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]); else return null;//--Dom & Stringvar get = { //-- 獲得Dom Id Id:function(obj) return is.object(obj) obj : (document.getElementById(obj)); //--獲得Body body:function() return document.body; //-- 通過(guò)Html 標(biāo)簽取對(duì)象 Tag:function(obj, Tagname) return obj.getElementsByTagName(Tagname); //-- 通過(guò)Name 來(lái)取對(duì)象 Name:function (Name) return document.getElementsByName(Name); //-- Url編碼轉(zhuǎn)換 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 跳轉(zhuǎn) url:function(URL) window.location.href = URL; //-- 頁(yè)面刷新 reload:function() window.location.reload(); //-- 動(dòng)態(tài)設(shè)置標(biāo)簽內(nèi)容 @ obj 為標(biāo)簽內(nèi)容，text 為內(nèi)容 html:function (obj, text) obj.innerHTML = text;var string = { //-- 將字符轉(zhuǎn)換成Json toJson:function(str) return eval('('+str+')'); //-- 不區(qū)分大小寫(xiě)判斷相等true , eqlower:function(str1, str2) if(str1.toLowerCase() == str2.toLowerCase()){ return true; return false;var is = { //-- 是否是IE瀏覽器,用此來(lái)判斷是否支持HTML5，低于IE10的返回false，由于 IE采用 V8 JavaScript引擎 html5:function () return (!/*@cc_on!@*/~0x1111111111111111) false : true; //--驗(yàn)證身份證，并且返回身份證，性別，住址，年齡 Card:function (sId) { var card_area={ 11:'北京', 12:'天津', 13:'河北', 14:'山西', 21:'遼寧', 15:'內(nèi)蒙古', 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:'臺(tái)灣', 81:'香港', 82:'澳門(mén)', 91:'國(guó)外' var iSum=0 var info='' var card_info=Array(2); var error = ''; sId=sId.replace(/x$/i,'a'); if (sId.length==0){ error = '請(qǐng)?zhí)顚?xiě)你的身份證'; return false; if (null == card_area[parseInt(sId.substr(0,2))]) { error = '非法證件你的地區(qū)填寫(xiě)有錯(cuò)誤請(qǐng)仔細(xì)填寫(xiě)'; 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 = '非法證件你的生日填寫(xiě)有錯(cuò)誤請(qǐng)仔細(xì)填寫(xiě)'; return false; for(var i = 17; i i--) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) if (1 != iSum%11) { error = '非法證號(hào)你確認(rèn)你是地球人請(qǐng)認(rèn)真填寫(xiě)哦~~~~'; return false; if (sId.length 19){ error = '你確認(rèn)你的身份證是有效證件？'; 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; //--獲取變量的類(lèi)型， 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'; //-- 變量是否是對(duì)象，返回 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; //-- 變量是否是小數(shù)，返回 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) { //--文件總大小 fileSize = file.getSize(FLIE.id); //--以2M為單位進(jìn)行文件切割 shardSize = 1024 * 1024 1; //--總片數(shù) shardCount = Math.ceil(fileSize / shardSize); for(var i = 0; i shardCount; ++i) //--計(jì)算每一片的起始與結(jié)束位置 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); //總片數(shù) formData.append("index", i + 1); //當(dāng)前是第幾片 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; //-- 獲得上傳文件的進(jìn)度值 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; //-- 獲得文件的類(lèi)型 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數(shù)據(jù)提交類(lèi)var Call = { * 參數(shù)為json對(duì)象|Json字符串， * @type post|get 默認(rèn)為get ，請(qǐng)求方式 * @url String 字符串型 ,請(qǐng)求地址 * @loading bool true|false 是否開(kāi)啟動(dòng)畫(huà) * @time int 動(dòng)畫(huà)時(shí)間如果 loading 為false 則不用設(shè)置這個(gè)參數(shù) * @data Json | String 提交的數(shù)據(jù) * @sucess 回調(diào)函數(shù) 這個(gè)必須有 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('請(qǐng)求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高版本創(chuàng)建XMLHTTP XMLHttpReq = new ActiveXObject('Msxml2.XMLHTTP'); catch(E) { try { XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');//IE低版本創(chuàng)建XMLHTTP catch(E) { XMLHttpReq = new XMLHttpRequest();//兼容非IE瀏覽器，直接創(chuàng)建XMLHTTP對(duì)象 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動(dòng)畫(huà) 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停止動(dòng)畫(huà) 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 = { //--動(dòng)態(tài)添加Dom節(jié)點(diǎn) Dom:function (obj,dom) { var dom = document.createElement(dom); get.Id(obj).appendChild(dom); return dom; //-- 動(dòng)態(tài)添加屬性 Attr:function(obj,key,value){ obj.setAttribute(key, value); return obj;//--URL編碼function url(Str){ return decodeURI(Str); * 模板字符串，語(yǔ)法標(biāo)簽采用 js /js * 完全遵循javascript原生語(yǔ)法 * @param template * @param vars * @returns {Function}function js_template(template, vars) { //唯一分隔標(biāo)志字符串 var split = '_{' + Math.random() + '}_'; //消除換行符 var estr = template.replace(//n|/r|/t/g, ''); var js = []; /**** * 匹配標(biāo)簽 js ... /js --并且替換為特定的分隔串， * 并將匹配的js代碼放入js數(shù)組中備用 * */ estr = estr.replace(/ js (.* ) //js /g, function ($0, $1) { js.push($1); return split; /*根據(jù)特定的分隔串分隔得到普通text文本串的數(shù)組*/ var text = estr.split(split); estr = " var output='';"; /**** * 0101010---0為text[]元素,1為js[]元素 * 重新串起來(lái)連接為可執(zhí)行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]);2. add.html
!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" form role="search" div input type="text" placeholder="Search" /div /form include file="Apps/Admin/View/include/menu.html"/ /div !--/.sidebar-- div div li a href="#" span /span /a /li li Dashboard /li /ol /div div div div Banner添加 button id='up' type="button" style='float:right; margin:4px;"' span /span 上傳 /button button id='add' type="button" style='float:right; margin:4px;"' span /span 確定添加 /button /div div div form id='banner' dd label Banner名字 /label /dd div input name='name' placeholder="Banner名字" value='' /div /dt div /div dd label Banner類(lèi)型: /label /dd div select name='type' option value='1' 首頁(yè) /option option value='2' 內(nèi)頁(yè)廣告 /option /select /div /dt div /div dd label Banner鏈接地址: /label /dd div input name='link' placeholder="Banner鏈接地址" value='' /div /dt /dl dd label Banner上傳: /label /dd div input type = 'button' value='選擇文件' input id='files' type='file' /div /dt div /div dd label 文件類(lèi)型: /label /dd div div id='filetype' /div /div /dt div /div dd label 文件上傳進(jìn)度: /label /dd div !-- div id='progress' /div -- progress id='progress' max="100" value='0' o(︶︿︶)o /progress div id='gress' height:0px; /div /div div id='fileSize' span /span span /span /div /dt /dl /form div /div div img id ='thmb' src='' div li span 文件大小: /span p 22222kb /p /li li span 文件路徑: /span p 22222kb /p /li li span 圖片高度: /span p 22222kb /p /li li span 圖片寬度: /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的id url:'{:U('Banner/add',0,0)}', //上傳請(qǐng)求文件的地址 //maxfile:true, //是否啟用大文件上傳 dataType:'json', progress:function(ev) { //--上傳中的進(jìn)度回掉函數(shù) get.Id('progress').value = file.getProgress(ev); //獲得上傳進(jìn)度用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 //--上傳完成后，后臺(tái)返回的回調(diào)函數(shù) 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', // 請(qǐng)求方式 Loading:true, // 是否啟動(dòng)動(dòng)畫(huà) time:5, //動(dòng)畫(huà)顯示幾秒 url:'{:U('Banner/add',0,0)} act=add', //請(qǐng)求地址 data:data, //發(fā)送的數(shù)據(jù) dataType:'json', //Ajax返回的數(shù)據(jù)類(lèi)型，可以是String success:function (e) { //回調(diào)函數(shù) set.url(e.url); /script /body /html 希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：js和HTML5基于過(guò)濾器從攝像頭中捕獲視頻的方法

下一篇：JS對(duì)HTML表格進(jìn)行增刪改操作