本文介绍jquery弹出页面框并实现弹出框的文件上传功能的代码实例，具有一定的参考价值，感兴趣的朋友们可以参考借鉴。
点击新增，弹出如图的弹出框，点击取消不保存页面信息，点击确定保存页面信息。 在前台页面添加一个标签，任何都可以
<p class="btn btn-default" id="padd">新增</p>
写弹出框页面
<p id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #8fb0d1; -moz-opacity: 0.8; opacity: 0.8; z-index: 1001; filter: alpha(opacity=40); background: rgb(0, 0, 0); opacity: 0.5;"></p>
<p id="popup_container" style="display: none; position: fixed; z-index: 99999; padding: 0px; margin: 0px; min-width: 600px; max-width: 600px; top: 50px; left: 454.5px;">
<br />
<h1 id="popup_title" style="font-size: 20px;">信息</h1>
<p id="popup_content" class="confirm" style="margin-top: 0px;">
<p id="popup_message">
<p style="width: 500px;">
<hr style="margin: 10px 0;" />
<p id="pswitchinfo" style="margin-bottom: 8px;"></p>
<p style="height: 300px; width: 450px;" id="piframe">
<p id="pcontract">
<p id="pcontract">
合同名称：<font color="red">*</font><input type="text" value="" id="txtcontractname" style="width: 360px"><br />
起始时间：<font color="red">*</font><input type="text" value="" id="txtcstarttime" style="width: 150px" onfocus="wdatepicker({ el: 'txtcstarttime' })">-
<input type="text" value="" id="txtcendtime" onfocus="wdatepicker({ el: 'txtcendtime' })" style="width: 150px"><br />
合同附件：
<asp:fileupload id="fileid" runat="server" />
</p>
</p>
<input type="button" id="btnadd" value='新增' />
<input type="hidden" id="hidvalue" runat="server" />
<p id="udfblock">
<p id="udf_template">
      人数<font color="red">*</font>：
<input type="text" value="" tag="txtnum01" style="width: 90px">＜x≤
<input type="text" value="" tag="txtnum02" style="width: 84px">
比例：<input type="text" value="" tag="txtpercent" style="width: 86px">%
<a class="udf_delete" style="cursor: pointer">删除</a>
</p>
</p>
</p>
</p>
</p>
<p id="popup_panel" style="clear: both">
<input type="button" class="btn btn-default" value=" 确定 " id="popup_ok2" />
<input type="button" class="btn btn-default" value=" 取消 " id="popup_cancel2" />
</p>
</p>
</p>
通过jquery控制显示或隐藏
$(function () {
//显示p
$("#padd").click(function () {
var hid = $("#hidvalue").val();
if (hid == "") {
alert("请先提交信息再新增");
return;
} else {
$("#popup_container").show();
$("#popup_overlay").show();
}
});
//弹窗取消按钮
$("#popup_cancel2").click(function () {
$("#popup_container").hide();
$("#popup_overlay").hide();
});
$("#popup_ok2").click(function () {
$("#popup_container").hide();
$("#popup_overlay").hide();
var keys = $("[tag='txtnum01']"),
values = $("[tag='txtnum02']"),
precent = $("[tag='txtpercent']"),
len = keys.length,
result = [],
txt = "";
for (var i = 0; i < len; i++) {
txt += keys.eq(i).val() + "," + values.eq(i).val() + "," + precent.eq(i).val() + ";";
}
var contractname = $("#txtcontractname").val();
var hid = $("#hidvalue").val();
var starttime = $("#txtcstarttime").val();
var endtime = $("#txtcendtime").val();
// var pic = $("#hiddenfield2").val();
var fileupload = $("#fileid").get(0);
var files = fileupload.files;
//ie8以及以上浏览器
var data = new formdata();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
data.append("txt", txt);
data.append("contractname", contractname);
data.append("hid", hid);
data.append("starttime", starttime);
data.append("endtime", endtime);
$.ajax({
//url: "agenteditsp.aspx/getdata",
url: "../handler/fileall.ashx",
type: "post",
//data: "{'txt':'" + txt + "','contractname':'" + contractname + "','hid':'" + hid + "','starttime':'" + starttime + "','endtime':'" + endtime + "','pic':'" + pic + "'}",
data:data,
contenttype: false,
processdata: false,
success: function (data) {
alert("操作成功");
location.href = location.href;
},
error: function (err) {
alert(err);
}
});
});
});
这个是点击新增添加新的代理的代码
<script type="text/javascript">
$(function () {
$("#btnadd").click(handleudfproperty);
function handleudfproperty() {
if ($("[tag='txtnum01']").size() < 7) {
$("#udf_template").clone().find(":text").val("").end().find("a").click(function () { $(this).parents('p').remove(); }).end().appendto($("#udfblock"));
}
}
});
</script>
这个是一般处理程序
public void processrequest(httpcontext context)
{
var txt = context.request["txt"];
var contractname = context.request["contractname"];
var hid = context.request["hid"];
var starttime = context.request["starttime"];
var endtime = context.request["endtime"];
var pic = "";
if (context.request.files.count>0)
{
var filenames = "";
httpfilecollection files = context.request.files;
for (int i = 0; i < files.count; i++)
{
httppostedfile file = files[i];
filenames =file.filename;
pic = filenames;
string fname = context.server.mappath("~/content/exploitation/" + file.filename);
file.saveas(fname);
}
}
// 向contractdetailsp表插入数据
if (!string.isnullorempty(txt) && !string.isnullorempty(contractname) && !string.isnullorempty(starttime) && !string.isnullorempty(endtime))
{
if (isexistagentname(hid) == 0)//判断代理是否存在
{
model.contractdetailsp condsp = new model.contractdetailsp();
condsp.zid = int.parse(hid);
condsp.name = getagentname(hid);
condsp.parentid = -1;
var inserttablename = db.context.insert<model.contractdetailsp>(condsp);
}
if (isexistcontractid(isexistagentname(hid), contractname) == 0)//判断合同是否存在
{
model.contractdetailsp condsp = new model.contractdetailsp();
condsp.name = contractname;
condsp.starttime = datetime.parse(starttime);
condsp.endtime = datetime.parse(endtime);
condsp.parentid = isexistagentname(hid);
condsp.contractpic = pic;
var inserttablename = db.context.insert<model.contractdetailsp>(condsp);
}
string[] strrlist = txt.split(';');
foreach (var item in strrlist)
{
string[] templist = item.split(',');
if (templist.length > 1)
{
model.contractdetailsp condsp = new model.contractdetailsp();
condsp.num1 = int.parse(templist[0].tostring());
condsp.num2 = int.parse(templist[1].tostring());
condsp.percentnum = decimal.parse(templist[2].tostring());
condsp.parentid = isexistcontractid(isexistagentname(hid), contractname);
var inserttablenum = db.context.insert<model.contractdetailsp>(condsp);
}
}
context.response.contenttype = "text/plain";
context.response.write("ok");
}
else
{
//return "请填写完必填项";
context.response.write("notall");
}
}
public bool isreusable
{
get
{
return false;
}
}
private static int isexistagentname(string agendid)
{//select id from contractdetailsp where agentid=2123
int str = 0;
var isexist = db.context.from<model.contractdetailsp>()
.select(a => a.id)
.where(a => a.zid == int.parse(agendid)).tolist();
if (isexist.count < 1)
{
str = 0;
}
else
{
foreach (var item in isexist)
{
str = item.id;
}
}
return str;
}
private static int isexistcontractid(int id, string contractname)
{//select id from contractdetailsp where parentid='' and name=''
int str = 0;
var isexist = db.context.from<model.contractdetailsp>()
.select(a => a.id)
.where(a => a.parentid == id && a.name == contractname).tolist();
if (isexist.count < 1)
{
str = 0;
}
else
{
foreach (var item in isexist)
{
str = item.id;
}
}
return str;
}
private static string getagentname(string hid)
{//select name,* from tblagent
string str = string.empty;
var agent = db.context.from<model.tblagent>().select(a => a.name)
.where(a => a.agentid == int.parse(hid)).tolist();
foreach (var item in agent)
{
str = item.name;
}
return str;
}
以上就是jquery弹出页面框并实现弹出框的文件上传功能代码详解的详细内容。