带进度条的ajax异步多线程文件拖拽上传-尊龙凯时

//没有规划过，所以有点乱，函数等没写注释。
//没有正在登录等等一些进度提示，由于时间关系，并未完善。
//还有一些**ug。
// by mady
if(window.navigator.useragent.indexof("chrome")<0){alert("请使用chrome浏览器！")};
var fs;//files
var u="http://www.51sjk.com/upload/articles/1/0/330/330431_20220922165009183.jpg";
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;imaxsize){
			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 = '' f.name  '';
	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.readasdata;
			}
			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;i16 ||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="
文件下载(" formatsize(totalsize) "/10mb)
";
				totalsize=0;
				fileshow.innerhtml=downtitle;
				for(i=0;i<_mfl;i =4){
					fileshow.innerhtml ='
\
						
\
							' _mf[i] '\
						
\
						
\
							' formatsize(_mf[i 1]) '\
						
\
						
\
							剩余' (7-(_mf[i 3])) '天\
						
\
						
\
							 |  | \
						
\
					
';	
				}
			}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();