js HTML5 Ajax实现文件上传进度条功能
作者：Strutsz
这篇文章主要介绍了javascript实现文件上传进度条功能的相关资料啊，感兴趣的朋友可以参考一下
本文实例介绍了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程序设计有所帮助。