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

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.οnmοusedοwn=function()
	{
		var action=getEvent();
		moveable=true;
		mouseX=action.clientX;
		mouseY=action.clientY;
		toTop=parseInt(win.style.top);
		toLeft=parseInt(win.style.left);
		tBar.οnmοusemοve=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.οnmοuseup=function()
		{
			moveable=false;
		}
	}
	closeButton.οnclick=celButton.οnclick=function()
	{
		
		document.body.removeChild(win);
		if(mask)
			{
				document.body.removeChild(mask);
			}
	}
	subButton.οnclick=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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是用 PHP 构造使用 JavaScript 弹出窗口,并在该窗口中获取用户输入的数据并上传到 MySQL 数据库中的代码: ```php <?php // 连接 MySQL 数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 检查是否有 POST 请求 if ($_SERVER["REQUEST_METHOD"] == "POST") { // 获取用户输入的数据 $name = $_POST["name"]; $email = $_POST["email"]; $phone = $_POST["phone"]; // 将数据插入 MySQL 数据库中 $sql = "INSERT INTO MyGuests (firstname, email, phone) VALUES ('$name', '$email', '$phone')"; if ($conn->query($sql) === TRUE) { echo "新记录插入成功"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } } // 关闭连接 $conn->close(); ?> <!DOCTYPE html> <html> <body> <h2>使用 JavaScript 弹出窗口获取用户输入的数据</h2> <button onclick="myFunction()">点击这里</button> <script> function myFunction() { // 弹出窗口 var name = prompt("请输入您的姓名:"); var email = prompt("请输入您的电子邮件地址:"); var phone = prompt("请输入您的电话号码:"); // 将数据发送到 PHP 文件中 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; xmlhttp.open("POST", "insert.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("name=" + name + "&email=" + email + "&phone=" + phone); } </script> </body> </html> ``` 请注意,这只是一个示例代码,您需要根据您的实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值