本文实例介绍了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) "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)" 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"__SOURCE__/css/rgba-fallback.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/html5shiv.js">希望本文所述对大家学习javascript程序设计有所帮助。