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

来源：互联网发布：js 银行卡 4位空格编辑：程序博客网时间：2024/05/17 07:08

function showWin(title,html,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="<br/><label>请选择文件:</label>"+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+width<w)&&y>0&&(y+height<h))
{
win.style.left=x+"px";
win.style.top=y+"px";
}
}
}
//释放鼠标不移动
document.onmouseup=function()
{
moveable=false;
}
}
closeButton.onclick=celButton.onclick=function()
{
document.body.removeChild(win);
if(mask)
{
document.body.removeChild(mask);
}
}
subButton.onclick=function()
{
if(type=="file")
{
formCon.submit();
}
document.body.removeChild(win);
if(mask)
{
document.body.removeChild(mask);
}
}
}
//获取事件
function getEvent()
{
return window.event || arguments.callee.caller.arguments[0];
}
function show(num,str,html)
{
//num控制显示类型
switch(num)
{
case 1:
var content=" <input type='file' name='upfile'/><br/>"
showWin('上传文件',content,300,100,true,"file",html);
break;
default:
showWin('消息',str,300,100,true,"file",0);
}
}

0 0