js HTML5 Ajax实现文件上传进度条功能_javascript技巧
程序员文章站
2022-03-06 15:21:39
...
本文实例介绍了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 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('?')
* 完全遵循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数组中备用
* */
estr = estr.replace(/(.*?)/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
2. add.html
Lumino Pro - Dashboard
希望本文所述对大家学习javascript程序设计有所帮助。
上一篇： php ajax如何删除数据