本文實例介紹了js結合HTML5 Ajax實現文件上傳進度條功能，分享給大家供大家參考，具體內容如下
1. lib.js
var Host = window.location.host;
//--Cookie
function 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 & String
var 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 = {
//-- 將字符轉換成Json
toJson: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=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) {
//--文件總大小
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高版本創建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, '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(/\n|\r|\t/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]);
}
}
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" 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的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程序設計有所幫助。