javascript弹出窗口实现动态文件上传

页面导航:首页 > 网络编程 > JavaScript > javascript弹出窗口实现动态文件上传

javascript弹出窗口实现动态文件上传

来源: 作者: 时间:2016-02-02 09:58 【

function showWin(title,html,width,height,modal,type,url){ 设置窗口大小if(widthsh?ch:sh; 创建模态if(modal){var mask=document createElement( div );mask style cssText = position:abs
function showWin(title,,width,height,modal,type,url)
{
	//设置窗口大小
	if(width<400)
		{
			width=400;
		}
	if(height<200)
		{
			height=200;
		}
	//body内边大小
	var cw=document.body.clientWidth;
	var ch=document.body.clientHeight;
	//文本框大小
	var sw=document.body.scrollWidth;
	var sh=document.body.scrollHeight;
	 //可见区域坐标
	var st = document.body.scrollTop;
	var sl = document.body.scrollLeft;
	var w=cw>sw?cw:sw;
	var h=ch>sh?ch:sh;
	//创建模态
	if(modal)
	{
		var mask=document.createElement("div");
		mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";
		document.body.appendChild(mask);
	}
	// 创建主窗口
	var win=document.createElement("div");
	win.style.cssText="position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) + "px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";
	//标题栏目
	var tBar=document.createElement("div");
	tBar.style.cssText="margin:0;width:" + width + "px;height:25px;background:green;cursor:move;";
	//给标题栏加文字
	var tText=document.createElement("div");
	tText.style.cssText="float:left;margin-left:30px;text-align:center;height:25px;line-height:25px;width:"+(width-80)+"px;";
	tText.innerHTML=title;
	tBar.appendChild(tText);
	//添加关闭按钮
	var  closeButton=document.createElement("div");
	closeButton.style.cssText="float:right;width:20px;margin:3px;cursor:pointer;color:red;";
	closeButton.innerHTML="X";
	tBar.appendChild(closeButton);
	win.appendChild(tBar);
	//窗口主体
	var bodyCon=document.createElement("div");
	bodyCon.style.cssText="text-align:left;width:" + width + "px;height:" + (height -50) + "px;overflow:auto;";
	switch(type)
	{
	case "file":
		var formCon=document.createElement("form");
		formCon.action=url;
		formCon.method="post";
		formCon.enctype="multipart/form-data";
		formCon.target="hidFram";
		formCon.id="formCon";
		formCon.name="formCon";
		formCon.innerHTML="
"+html;
		bodyCon.appendChild(formCon);
		var framCon=document.createElement("iframe");
		framCon.name="hidFram";
		framCon.id="hidFram";
		framCon.style.cssText="width:400px;height:200px;";
		bodyCon.appendChild(framCon);
		//当framCon内容加载完时,设置内容
		framCon.onload = function(){
	    $res=framCon.contentWindow.document.body.innerHTML;
			alert($res+"Local iframe is now loaded.");
			}
		break;
		default:
		bodyCon.innerHTML=html;
	}
	win.appendChild(bodyCon);
	//窗体底部的按钮部分
	var btnCon = document.createElement('div');
	btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:#EED5B7;text-align:center;padding-top:3px;";
	var subButton=document.createElement("button");
	subButton.style.cssText="float:right;";
	subButton.name="submit";
	subButton.innerHTML="确定";
	btnCon.appendChild(subButton);
	//用户填充按钮之间的空白
	var nbsp = document.createElement('label');
	nbsp.innerHTML = "  ";
	btnCon.appendChild(nbsp);
	var celButton=document.createElement("button");
	celButton.style.cssText="float:right;";
	celButton.name="cancel";
	celButton.innerHTML="取消";
	btnCon.appendChild(celButton);
	win.appendChild(btnCon);
	document.body.appendChild(win);
	 //添加关闭按钮
	//var closeBt=document.createElement("button");
	//closeBt.innerHTML="关闭";
	//拖动窗口
	//鼠标坐标
	var mouseX=0;
	var mouseY=0;
	//窗口相对坐标
	var toTop=0;
	var toLeft=0;
	//判断鼠标是否可以移动
	var moveable=false;
	//标题栏被按下时初始化数据
	tBar.onmousedown=function()
	{
		var action=getEvent();
		moveable=true;
		mouseX=action.clientX;
		mouseY=action.clientY;
		toTop=parseInt(win.style.top);
		toLeft=parseInt(win.style.left);
		tBar.onmousemove=function()
		{
			
			if(moveable)
				{
				   var eve=getEvent();
				   var x=toLeft+eve.clientX-mouseX;
				   var y=toTop+eve.clientY-mouseY;
				   //判断是否在窗口里面
				   if(x>0&&(x+width0&&(y+height


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<