当前位置：A5下载 > 编程开发 > 网站开发 > js HTML5 Ajax实现文件上传进度条功能

js HTML5 Ajax实现文件上传进度条功能

时间：2016-02-14 09:32作者：fang人气：779

文实例介绍了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>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</form>

</div>

<li class="active">Dashboard</li>

</ol>

</div>

<div class="panel-heading">Banner添加

</div>

<dd><label>Banner名字</label></dd>

<dt>

</div>

</dt>

<dd><label>Banner类型:</label></dd>

<dt>

</select>

</div>

</dt>

<dd><label>Banner链接地址:</label></dd>

<dt>

</div>

</dt>

</dl>

<dd><label>Banner上传:</label></dd>

<dt>

</div>

</dt>

<dt>

</div>

</dt>

<dd><label>文件上传进度:</label></dd>

<dt>

</div>

</div>

</dt>

</dl>

</form>

<div>

</ul>

</div>

</div>

</div>

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程序设计有所帮助。

标签HTML5,Ajax,实现,文件,上传,进度,功能,文实例

A5站长下载站

js HTML5 Ajax实现文件上传进度条功能

相关推荐

相关下载

网友评论

热门阅览

最新排行