带进度条的Ajax异步多线程文件拖拽上传

2015/05/14 36522
//没有规划过，所以有点乱，函数等没写注释。
//没有正在登录等等一些进度提示，由于时间关系，并未完善。
//还有一些小Bug。
// by mady

if(window.navigator.userAgent.indexOf("Chrome")<0){alert("请使用Chrome浏览器！")};

var fs;//files
var u="http://cool.c.pl/";
if(window.location.href.indexOf("www")!=-1)window.location.href=u;
//var u="http://127.0.0.1/Justoo/demoCopy/";
var status=0;//状态：1：在线，0：离线
var upresult=""; //上传结果
var strmaxsize="2M";
var maxsize=2097152;
var totalsize=0;//文件总大小
var fc=0;
var gt=0;//大于Maxsize的文件数
var axhr=[];
var aloadding=[];//正在上传
var tid;
var timeCount=0;
var fsl=0;//files length
var delcount=0;//文件删除数
var $=function(id){return document.getElementById(id)?document.getElementById(id):!1;};
var main=$("main");
var title=$("title");
var list = $("fileList");
var FilesCount=$("FilesCount");
var result=$("result");
var help=$("help");
var fn0=$("fn0");
var us0=$("us0");
var op0=$("op0");
title.innerHTML=l.title;
help.innerHTML=l.help;
fn0.innerHTML=l.fn0;
us0.innerHTML=l.us0;
op0.innerHTML=l.op0;

document.addEventListener("dragenter", function(e){  
    main.style.borderColor = 'gray';  
}, false);  
document.addEventListener("dragleave", function(e){  
    main.style.borderColor = 'silver';  
}, false);
main.addEventListener("dragenter", function(e){  
    main.style.borderColor = 'gray';  
    main.style.backgroundColor = 'white';  
}, false);  
main.addEventListener("dragleave", function(e){  
    main.style.backgroundColor = 'transparent';  
}, false);  
main.addEventListener("dragenter", function(e){  
    e.stopPropagation();  
    e.preventDefault();  
}, false);  
main.addEventListener("dragover", function(e){  
    e.stopPropagation();  
    e.preventDefault();  
}, false);   
main.addEventListener("drop", function(e){  
	var i,tmplen,tfs=[];
    e.stopPropagation();  
    e.preventDefault();  
	if(status==0){
		msgbox("尚未登录不能上传！");
		return false;	
	}
	fs=e.dataTransfer.files;
	tmplen=fs.length;
	FilesCount.innerHTML=l.filescount+(tmplen+fsl-delcount);
	for(i=0;i<tmplen;i++){
		if(fs[i].size>maxsize){
			gt++;
			continue;
		}
		if(gt){
			msgbox("有"+gt+"个文件超过"+strmaxsize);	
			gt=0;
		}
		fc++;
		showUploadedItem(fs[i],i);
		tfs.push(fs[i]);
	}
	if(fc){
		fc=0;
		delcount++;
		Timing();
		sendFiles(tfs);
	}else{
		upFilesCount();
	}
}, false); 

function showUploadedItem (f,i) {
	var li   = document.createElement("div");
	li.innerHTML = '<span class="fn" name="fn" title='+f.name+'>'+f.name +'</span><span name="fsize"></span><span><a href="#" onclick="delFile(this,'+parseInt(i+fsl)+')">'+l.abort+'</a></span>';
	list.appendChild(li);
}   



function sendFiles(fs) {
	var i,len = fs.length,reader,file;
	
	for (i=0 ; i < len; i++ ) {
		file = fs[i];
		if (file.type.match(/image.*/)||!0) {
			if ( window.FileReader ) {
				reader = new FileReader();
				reader.readAsDataURL(file);
			}
			var formdata = window.FormData?new FormData():!0;
			if (formdata) {
				formdata.append("images", file);
				axhr[i+fsl]=new upload(formdata,i+fsl);
			}
		}	
	}
	fsl+=len;
}

function upload(formdata,se){
	var tfn,tfs,tse;
	var xhr=new XMLHttpRequest();
	aloadding[se]=1;
	//更新状态
	updateStatus();
	//开始计时
	xhr.open("post",u+"upload.php",true);
	//xhr.setRequestHeader("Content-Type", "multipart/form-data");
	xhr.setRequestHeader("If-Modified-Since","0");
	fsize=document.getElementsByName("fsize");
	fn=document.getElementsByName("fn");
	tfn=fn[se];
	tfs=fsize[se];
	tse=se;
	xhr.upload.onprogress = function(e) {
		if(e.lengthComputable) {
			var xs=e.loaded/e.total*100;
			xs=parseInt(xs);
			tfn.style.backgroundPosition=-200+xs*2+"px";
			tfs.innerHTML=formatSize(e.loaded)+"/"+formatSize(e.total);
			if(e.total==e.loaded){
				aloadding[tse]=0;
				updateStatus();
			}
		}
  	};
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				updateMyFiles();
				if(xhr.responseText.toJustLowerCase()!="u.ok"){
					upresult+=xhr.responseText+"\n";
					$("fileList").getElementsByTagName("div")[tse+1].style.display="none";
					delcount++;
					upFilesCount();
					if(result.innerHTML==l.successful){
						setTimeout(function(){msgbox(upresult+(upresult.split("\n").length-1)+"个文件上传失败！");},200);
						upresult="";
					}
				}
			}
		}
	};
	xhr.send(formdata);
	return xhr;
}

function delFile(o,v){
	//先判断是否正在上传，如果是则取消上传，如果不是则Ajax从服务器删除
	if(aloadding[v]==1){
		axhr[v].abort();
		aloadding[v]=0;
	}else{
		//delFromServer(v);
	}
	updateStatus()
	o.parentNode.parentNode.style.display='none';
	//delcount++;
	upFilesCount();
}

function formatSize(v){
	return v<1024?(v+'B'):(v/1024<1024)?(to2p(v/1024)+'KB'):to2p(v/1024/1024)+'MB';
}

function to2p(v){
	return Math.round(v * 100) / 100;
}

function delFromServer(v,fid){
	ajax({
	u:v,
	a:!0,
	d:'fid='+fid,
	f:function(x){
		if(!handleAjaxInfo(x.responseText)){
			msgbox("文件删除失败！");	
		};
		updateMyFiles();
	}
	});
	
}

function upFilesCount(){
	
	FilesCount.innerHTML=l.filescount+(fsl-delcount);	
}

function updateStatus(){
	var tmp;
	tmp=aloadding.join("");
	if(tmp.indexOf("1")!=-1){
		result.innerHTML=l.uploadding;
		return true;
	}else{
		result.innerHTML=l.successful;
		Timeover();
		return false;
	}
}
//开始计时
function Timing(){
	tid=setInterval(updateTime,1000);
}
//结束计时
function Timeover(){
	clearInterval(tid);
	//timeCount=0;
}
//更新时间
function updateTime(){
	timeCount++;
	var time=document.getElementById("time");
	time.innerHTML=l.timeCount+timeCount+l.second;
}

$("btn_login").onclick=login;

function login(){
	var tmp=isBlank(["user","pwd"],["用户名不能为空！","密码不能为空！"]);
	if(tmp){ 
		msgbox(tmp);
		return false;
	}
	ajax({
		u:window.u+"login.php",
		a:!0,
		d:'u='+$("user").value+'&p='+$("pwd").value,
		f:function(x){
			if(!handleAjaxInfo(x.responseText)){
				msgbox("用户名不能为空！");	
			};
		}
	});
	updateMyFiles();
}

$("btn_reg").onclick=function(){
	showUser("r");
}
$("btn_submit").onclick=reg;

$("btn_loginout").onclick=loginout;

$("btn_back").onclick=function(){
	showUser("l");
}

$("pwd").onkeydown=function(e){
	if(e.keyCode==13){
		login();
	}
}

$("e").onkeydown=function(e){
	if(e.keyCode==13){
		reg();
	}
}

function reg(){
	var tmp=isBlank(["u","p","p2","e"],["用户名不能为空！","密码不能为空！","确认密码不能为空！","E-mail不能为空！"]);
	if(tmp){
		msgbox(tmp);
		return false;	
	}
	if($("p").value!=$("p2").value){
		msgbox("两次输入的密码不同！");
		return false;
	}
	if(!isEmail($("e").value)){
		msgbox("邮箱格式错误！");
		return false;
	}
	if(!isUserName($("u").value)){
		msgbox("用户名格式错误（只允许字母,数字以及以下字符_.- 长度在4-16之间且必须字母开头）！");
		return false;
	}
	ajax({
		u:window.u+"reg.php",
		a:!0,
		d:'u='+$("u").value+'&p='+$("p").value+'&p2='+$("p2").value+'&e='+$("e").value,
		f:function(x){
			handleAjaxInfo(x.responseText);
		}
	});
}

function showUser(v){
	switch(v){
		case 'l':
		$("l").style.display="block";
		$("ld").style.display="none";
		$("r").style.display="none";
		break;
		case 'ld':
		$("l").style.display="none";
		$("ld").style.display="block";
		$("r").style.display="none";
		break;
		case 'r':
		$("l").style.display="none";
		$("ld").style.display="none";
		$("r").style.display="block";
		break;
	}
}

function ajax(v){
	//m:method,a:asyn,u:url,f:callback,d:data;
	v.m=v.m?v.m:'get';
	v.a=v.a?!0:!1;
	var xml=new XMLHttpRequest();
	xml.open(v.m,v.u+"?"+v.d,v.a);
	xml.setRequestHeader("If-Modified-Since","0");
	///xml.setRequestHeader("Cache-Control","no-cache");
	xml.send();
	if(v.a){
		xml.onreadystatechange=function(){
			if(xml.readyState==4){
				if(xml.status==200){
					v.f(xml);
				}
			}
		}
	}else{
		return xml.responseText;
	}
}

function loginout(){
	delCookie("username");
	delCookie("password");
	delCookie("ip");
	post("loginout.php");
	status=0;
	updateMyFiles();
}

function post(url){
	ajax({
		m:"post",
		u:url,
		a:!0,
		d:'',
		f:function(x){
			showUser("l");
		}
	});
}

//首次进入页面自动登录
ajax({
	u:window.u+"login.php",
	a:!0,
	d:'u',
	f:function(x){
		if(!handleAjaxInfo(x.responseText)){
			showUser("l");
		};
	}
});


String.prototype.toJustLowerCase= function(){
	//转为只含有字母数字下划线和点的小写字符串
	return this.toLowerCase().replace(/[^\w\.]/ig,"");
}
function handleAjaxInfo(v){
	v=v.toJustLowerCase();
	switch(v){
		case 'l.nologin':
			return !1;
		case 'r.ok':
		case 're.ok':
		case 'l.ok':
			status=1;
			$("info").innerHTML='您好：'+getCookie("username")+'当前IP：'+getCookie("ip");
			showUser("ld");
			break;
		case 'd.ok':
			msgbox("删除成功！");
			break;
		case 'l.servererror':
			msgbox("服务器错误！");
			break;
		case 'l.loginfaild':
			msgbox("用户名或密码错误！");
			break;
		case 'r.wrong':
			msgbox("用户名或Email已注册！");
			break;
		default:
			msgbox(v);
			break;
	}
	return !0;
}

function isBlank(v1,v2){
	if(typeof(v2)!="undefined"){
		for(var i=0;i<v1.length;i++){
			if($(v1[i]).value.replace(" ","")==""){
				$(v1[i]).focus();
				return v2[i];
			}
		}
		return !1;
	}
	if($(v1).value.replace(" ","")==""){
		return !0;	
	}
	return !1;
}

function isEmail(v){
	return /^[0-9a-zA-Z_\.\-]+@([0-9a-zA-Z_\-\.])+[\.]+[a-zA-Z]{2,4}$/.test(v);
}

function isUserName(v){
	if(v.length>16 ||v.length<4)return false;
	return /^[a-zA-Z][0-9a-zA-Z_\.\-]*$/.test(v);
}

function msgbox(v){
	alert(v);
}

function getCookie(objName){
	var arrStr = document.cookie.split("; ");
	for(var i = 0;i < arrStr.length;i++){
		var temp = arrStr[i].split("=");
		if(temp[0] == objName) return unescape(temp[1]);
	}
}
function delCookie(name){
	var date = new Date();
	date.setTime(date.getTime() - 10000);
	document.cookie = name + "=a; expires=" + date.toGMTString();
}

//test function
function updateMyFiles(){
	ajax({
		u:window.u+"getfiles.php",
		a:!0,
		d:'u',
		f:function(x){
			var tmp=x.responseText;
			var fileshow=document.getElementById("down");
			if(tmp.indexOf("var _mf=[''];")<0){
				eval(tmp);
				_mf.pop();
				var _mfl=_mf.length;
				for(i=0;i<_mfl;i+=4){
					totalsize+=parseInt(_mf[i+1],10);
				}
				var downtitle="<dt>文件下载("+formatSize(totalsize)+"/10MB)</dt>";
				totalsize=0;
				fileshow.innerHTML=downtitle;
				for(i=0;i<_mfl;i+=4){
					fileshow.innerHTML+='<dd>\
						<div class="filename">\
							'+_mf[i]+'\
						</div>\
						<div class="size">\
							'+formatSize(_mf[i+1])+'\
						</div>\
						<div class="renewal">\
							剩余'+(7-(_mf[i+3]))+'天\
						</div>\
						<div class="down">\
							<a href="javascript:renewal(\''+window.u+'renewal.php\',\''+_mf[i+2]+'\')">续期</a> | <a href="'+window.u+'down.php?fid='+_mf[i+2]+'">下载</a> | <a href="javascript:delFromServer(\''+window.u+'delfile.php\',\''+_mf[i+2]+'\')">删除</a>\
						</div>\
					</dd>';	
				}
			}else{
				fileshow.innerHTML="";	
			}
		}
	});
}


function renewal(v,fid){
	ajax({
	u:v,
	a:!0,
	d:'fid='+fid,
	f:function(x){
		if(!handleAjaxInfo(x.responseText)){
			msgbox("续期失败！");	
		}else{
			msgbox("续期成功！");		
		};
		updateMyFiles();
	}
	});
}
updateMyFiles();
代码片段
